부트 스트랩 아코디언에 숨겨진 JQuery 사이클 슬라이드 쇼를 중앙에 배치하는 방법?

Question

부트 스트랩 3과 Jquery Cycle 2 (http://www.malsup.com/jquery/cycle2/)를 사용하여 페이지로드시 숨겨진 슬라이드 쇼로 아코디언을 만듭니다.

<div data-toggle="collapse" data-target="#my-slideshow"> 
    <div>click to see slideshow</div> 
</div> 
<div class="collapse" id="my-slideshow">   
    <div id="slideshow" data-cycle-pause-on-hover="true" data-cycle-center-horz="true" data-cycle-auto-height="container" data-cycle-slides="> div"> 
     <div>slide 1. blah.....</div> 
     <div>slide 2. blah.....</div> 
     <div>slide 3. blah.....</div> 
    </div> 
</div> 

여기

입니다 자바 스크립트 :

$('#slideshow').cycle({}); 

이 HTML을 잘 한 가지를 제외하고 작동 : 슬라이드 쇼는 브라우저 내에서 중심에 있지 않습니다 여기에 HTML입니다. # my-slideshow에서 클래스 "붕괴"를 제거하고 페이지를로드하면 슬라이드 쇼가 실제로 화면 중앙에 배치되지만 이것이 필요한 것은 아닙니다.

모바일 웹 사이트에서 작업하고 있으며 화면 크기가 페이지로드시 슬라이드 쇼를 숨길 필요가있는 이유입니다 ("축소"클래스 사용). 어떤 문제가 있습니까?

감사합니다.

UPDATE 여기

는 바이올린 데모입니다 : (! isherwood의 ORGINIAL 코드 덕분에) http://jsfiddle.net/mddc/FDH2K/10/. "collpase"클래스를 추가하고 제거하여 효과를 볼 수 있습니다.

Answer 1

브라우저 (또는 JSFiddle의 패널)의 크기를 조정하면 센터링이 발생합니다. 이는 회전식 커서가 보이기 전까지 센터링 플러그인이 그 일을 할 수 없음을 나타냅니다.

부트 스트랩 축소 콜백을 사용하여 아코디언 패널을 표시 한 후에 프로그래밍 방식으로 초기화 해보십시오.