bxslider와 자바스크립트에 관한 질문입니다.
본문
요기에 파일을 올려 놓았습니다.
제가 궁금한 것이...
공식페이지를 참고하여 한 페이지에 여러개의 슬라이더가 들어갈 수 있도록 했습니다.
그런데, 토글 메뉴를 이용해서 일부분을 숨겼다가 버튼을 클릭하면 나타나도록 하느라고
상위 div에 display:none을 설정해 놓았습니다.
그랬더니 숨겨져있던 하위 슬라이더에도 영향을 미치는건지...
이미지가 나타나질 않네요...
첫번째 처음부터 열려있는(display:block) 슬라이더는 잘 나오는데 말예요...
완전 똑같이 쓰고 클래스명만 1,2,3 이런식으로 추가로 붙여줬는데,
잘 안되는 이유를 못 찾겠습니다 ㅠ
혹시 아시는 분 계시면 알려주세요~~ 부탁드려요
감사합니다... ㅠㅠ
답변 3
먼가 더 좋은 방법이 분명히 있을거 같은데 제 실력으로는 지금은 이 방법 밖에 생각이 나는게 없네요
<script>
//slideBox
var slidechk1 = true;
var slidechk2 = true;
$(document).ready(function(){
$(".btn_worksToggle").click(function(){
var index = $(".btn_worksToggle").index($(this));
$('.worksToggle').eq(index).slideToggle('slow');
$('.btn_worksToggle i').eq(index).toggleClass('fa-chevron-circle-down fa-minus-circle');
if(index == 1 && slidechk1){
mySlider1.reloadSlider();
slidechk1 = false;
}
if(index == 2 && slidechk2){
mySlider2.reloadSlider();
slidechk2 = false;
}
});
$('.bxslider1').bxSlider({
pagerCustom: '#bx-pager1',
controls:false,
auto:true,
captions: true,
pause: 6000,
speed: 1000,
mode: 'fade'
});
mySlider1 = $('.bxslider2').bxSlider({
pagerCustom: '#bx-pager2',
controls:false,
auto:true,
captions: true,
pause: 6000,
speed: 1000,
mode: 'fade'
});
mySlider2 = $('.bxslider3').bxSlider({
pagerCustom: '#bx-pager3',
controls:false,
auto:true,
captions: true,
pause: 6000,
speed: 1000,
mode: 'fade'
});
});
</script>
정말 감사드립니다.
알려주신대로 해보니 작동 되어서,
알려주신 코드를 이용하려고 합니다. 감사해요!!
한 페이지에 슬라이드가 적게는 서너개, 많게는 10개도 들어가는 상황이라.
코드가 좀 길어지는 게 걱정이긴 한데... ㅠ
혹시 더 좋은 방법이 생각나시면 알려주세요 ^^
감사합니다 정말 감사합니다~~
자바스크립트로 코딩하실때, 스크립트의 대상이 되는 요소가 display:none 으로 가려진 상태이면 목표 대상을 찾지못해서 제대로 표현되지 않을 경우가 있던걸로 기억합니다.
display:none 이 아닌 visible:hidden 등으로 바꿔서 테스트해보셔요.
또한, 해당 버튼을 클릭했을때 스크립트를 초기화하도록 해보는 것도 방법일껍니다.
가령 bxslider 의 초기화 코드를 버튼을 클릭했을때 작동하도록요.
답변 감사드립니다. 그런 부분을 전혀 몰랐네요..
좀 더 공부해보도록 하겠습니다 감사해요!! (__)
// script.js
$('.btn_worksToggle i').eq(index).toggleClass('fa-chevron-circle-down fa-minus-circle defaultOpen');
답변 감사합니다 ㅠ ㅠ 알려주신 방법으로 해보았는데
잘 안되네요 ㅠ ㅠ ... 더 열심히 공부할게요!
