Question

我正在使用Bootstrap 3和Jquery Cycle 2（http://www.malsup.com/jquery/cycle2/）来构建一个带有隐藏幻灯片的折叠式页面加载。这是HTML：

<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中删除“崩溃”类并加载页面，那么幻灯片确实会在屏幕上居中，但这不是我需要的。

我正在移动网站上工作，屏幕尺寸是我需要在页面加载时隐藏幻灯片的原因（使用“折叠”类）。任何修复？

谢谢和问候。

更新

这是小提琴演示：http://jsfiddle.net/mddc/FDH2K/10/（感谢isherwood的原始代码！）。您可以通过添加和删除“collpase”类来查看效果。

Answer 1

我看到如果您调整浏览器（或JSFiddle中的面板）的大小，就会发生居中。这似乎表明，在旋转木马可见之前，居中插件无法做到。

尝试使用Bootstrap Collapse回调可见手风琴面板后以编程方式初始化它。

如何集中隐藏在Bootstrap手风琴中的JQuery Cycle幻灯片？

1 个答案: