如何將JQuery循環幻燈片隱藏在Bootstrap手風琴中隱藏？

我正在使用Bootstrap 3和Jquery Cycle 2（http://www.malsup.com/jquery/cycle2/）在頁面加載時構建帶有隱藏幻燈片的手風琴。下面是HTML：如何將JQuery循環幻燈片隱藏在Bootstrap手風琴中隱藏？

<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>

下面是使用Javascript：

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

這個HTML效果很好，除了一兩件事：幻燈片沒有在瀏覽器中居中。如果我從＃my-slideshow中刪除class「collapse」並加載頁面，那麼幻燈片確實集中在屏幕上，但這不是我所需要的。

我正在使用移動網站，屏幕大小是我需要在頁面加載時隱藏幻燈片的原因（使用「摺疊」類）。任何修復？

感謝和問候。

UPDATE

這裏是小提琴演示：（！感謝伊舍伍德的orginial代碼）http://jsfiddle.net/mddc/FDH2K/10/。您可以通過添加和刪除「collpase」類來看到效果。

來源

2014-01-29 curious1

這是一個初學者小提琴。看看你是否可以演示這個問題。 http://jsfiddle.net/isherwood/FDH2K/ – isherwood

我添加了另一個需要放置幻燈片的Cycle2腳本：jquery.cycle2.center.min.js。您可以通過添加和刪除「collpase」類來看到效果。我添加了這個腳本，但它似乎沒有持續下去。感謝您的支持！ – curious1

@isherwood，你可以添加http://malsup.github.io/min/jquery.cycle2.center.min.js作爲演示的另一個資源嗎？我嘗試過，但不會爲其他用戶持續使用。 – curious1

我發現如果您調整瀏覽器（或JSFiddle中的面板），則發生居中。這似乎表明，在轉盤可見之前，居中插件無法完成其任務。

嘗試使用Bootstrap摺疊回調可見手風琴面板後以編程方式初始化它。

來源

2014-01-29 16:40:29 isherwood

感謝您的提示。有效！ – curious1

如何將JQuery循環幻燈片隱藏在Bootstrap手風琴中隱藏？

回答

相關問題