2017-01-13 21 views
1

"갤러리 표시"링크를 클릭 한 후 스 와이프 갤러리를 표시하고 싶습니다. 하지만 숨겨진 div 내부에서 초기화하면 스 와이프가 제대로 작동하지 않는 것 같습니다. 여기 iDangero.us div 세트 안에 스 와이프가 작동하지 않습니다. 숨김 표시 : none

내 페이지입니다 :

<div> 
<a href=“javascript:;” onclick=“toggle_visibility('gallery');”><img src=“img.jpg” alt=“Click to open the gallery”></a> 
</div> 

<div id=“gallery” style:“display:none”> 
<!— Swiper —> 
<div id=“slide-event” class=“swiper-container swiper-container-event”> 
<div class=“swiper-wrapper”> 
… 
</div> 
<!— Add Arrows —> 
<div id=“show-hide” class=“swiper-button-next”></div> 
<div id=“show-hide” class=“swiper-button-prev”></div> 
</div> 
<!— End Swiper —> 
</div> 

<script src="js/swiper.jquery.js"></script> 

이 해결 방법은 나를 위해 작동하지 않습니다

function reinitSwiper(swiper) { 
    setTimeout(function() { 
    swiper.reInit(); 
    }, 500); 
} 

어쩌면 또 다른 자바 스크립트 트릭이있다? 어떠한 제안?

+0

이 같은 뭔가 시도했다 : $ ('A')에 ('클릭'기능 reinitSwiper (swiper) { 에서는 setTimeout (함수() { swiper. .reInit(); }, 500); }); 작동하지 않습니다. –

+0

그럼 이보다 더 쉽습니다. Swiper 초기화에 "observer : true, observeParents : true"를 추가하기 만하면됩니다. –

+0

프레드릭 딜라 이어 (Frédéric Delaloire)가 덧붙였습니다. 고맙습니다. –

답변

1

시도 호출하는 슬라이더

4

를 표시 할 때이 청취자 발견

swiper.update(); 

방법 :

observer: true 

관찰자 Swiper에 돌연변이 옵저버를 사용하려면 true로 설정을하고 그 요소들. 이 경우 Swiper는 참으로 당신이 (숨김/표시 등)의 스타일을 변경 또는 그 자식 요소를 수정하는 경우마다 (추가처럼/제거 슬라이드)

observeParents: true 

observeParents (초기화) 설정을 업데이트됩니다 또한 경우 swiper 부모 요소에 대한 돌연변이를 볼 필요