如何将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手风琴中隐藏？

回答

相关问题