bxslider와 자바스크립트에 관한 질문입니다.

bxslider와 자바스크립트에 관한 질문입니다.

QA

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');    

답변을 작성하시기 전에 로그인 해주세요.
전체 95
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT