요소 스타일 "display : none"일 때 bxslider 축소

Question

bxslider 프로젝트에 사용하고 싶습니다.

하지만 같은 페이지에서 두 개 이상의 슬라이더를 사용하는 것과 관련된 문제가 있습니다 (본 예에서는 3 개).

$(document).ready(function(){ 
    $('.slider1').bxSlider({ 
     slideWidth: 200, 
     minSlides: 2, 
     maxSlides: 3, 
     slideMargin: 10 
    }); 
    $('.slider2').bxSlider({ 
     slideWidth: 200, 
     minSlides: 2, 
     maxSlides: 3, 
     slideMargin: 10 
    }); 
    $('.slider3').bxSlider({ 
     slideWidth: 200, 
     minSlides: 2, 
     maxSlides: 3, 
     slideMargin: 10 
    }); 
}); 

나는 예를 만들었습니다 : 내 예를 옵션 해당 슬라이더 붕괴를 볼 수 3 2 또는 옵션에서 선택하면 jsfiddle

합니다.

나는 문제가 옵션 2 및 옵션 3에 대한 div에 style="display:none"입니다 그것을 볼 수있다.

누구든지이 문제를 해결할 수 있습니까?

Answer 1

동의합니다. 이것은 display : none과 관련이있는 것 같습니다. 다음은 축소 된 회 전자를 지나치는 방법입니다.

먼저 각 슬라이더를 만들 때 변수에 할당해야합니다. 나중에 필요할 것이기 때문에 이들을 글로벌하게 만드십시오. 새 스피너를 보여줄 때

sldr1 = $('.slider1').bxSlider({ 
      slideWidth: 200, 
      minSlides: 2, 
      maxSlides: 3, 
      slideMargin: 10 
     }); 

, 당신은

sldr1.reloadSlider(); 

내 문제, 당신의 jsfiddle 주식의 특징을 사용할 필요가 내가 할 수있는 다시 크기 창 및 축소 회는 것입니다 제대로 표시하십시오. 회 전자에 반응을주기 위해 $ (창) 또는 $ (문서)의 크기를 조정하려고 많은 시간을 보냈지만 제대로 작동하는 것을 찾지 못했습니다.

이 챌린지에 공동 고통을 겪고있는 불쌍한 영혼을 위해 중요한 것은 초기화 시간에 참조를 저장해야한다는 것입니다. 그것은, bxSlider()을 작동 할 수처럼 당신이 당신의 선택 기능에서이 작업을 수행 할 수

...

//hide and show logic 
. 
. 
. 
//reload slider 
sldr1 = $('.slider1').bxSlider(); 
sldr1.reloadSlider(); 

이 단순히 기존의 회 전자에 대한 참조를 가져 오는 데 사용 할 수없는 것 같지만. 실제로 두 번째 슬라이더를 만듭니다. 이렇게하면 여러 컨트롤 등을 알 수 있습니다.
설명서를주의 깊게 다시 읽으면 이것이 의도적 인 것입니다. 그래서 버그가 아니라 단지 배우는 것입니다. 벌금. 신사는 그의 작품을 기증 했으므로 기꺼이 그것을 거짓말처럼 받아 들일 것입니다.

나의 1 개의 다른 팁 : 나는 슬라이드의 왼쪽에 하얀 패딩을 얻고 있었다. 그것은 총알이 스스로를 드러내는 것입니다. 뭔가 좋은 승/bxslider CSS를 연주하지 내 복잡한 CSS를 /와 함께 할. DIV 컨테이너 안의 DIV 슬라이드로 변경했습니다. BxSlider는 문서별로이 기능을 잘 수행합니다.

행운 행운