甚至数字幻灯片隐藏在Bootstrap的旋转木马中

时间:2015-03-13 13:18:38

标签: javascript jquery css twitter-bootstrap joomla

我为joomla 2.5.x / 3.x创建了一个幻灯片模块。它读取指定目录中的图像文件并显示幻灯片。今天我想在另一个模板中使用它。 Joomla很好地展示了我的幻灯片模块,但隐藏了偶数编号的幻灯片。显示第1个,隐藏第2个,显示第3个,隐藏第4个等等。

我的html输出如下:

<div>
    <script src="http://myjoomlasite.com/media/jui/js/bootstrap.min.js">
    <div id="zkanocaCarousel2" class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="#zkanocaCarousel2" data-slide-to="0" class=""></li>
            <li data-target="#zkanocaCarousel2" data-slide-to="1" class=""></li>
            <li data-target="#zkanocaCarousel2" data-slide-to="2" class=""></li>
            <li data-target="#zkanocaCarousel2" data-slide-to="3" class="active"></li>
            <li data-target="#zkanocaCarousel2" data-slide-to="4" class=""></li>
            <li data-target="#zkanocaCarousel2" data-slide-to="5" class=""></li>
            <li data-target="#zkanocaCarousel2" data-slide-to="6" class=""></li>
            <li data-target="#zkanocaCarousel2" data-slide-to="7" class=""></li>
            <li data-target="#zkanocaCarousel2" data-slide-to="8" class=""></li>
        </ol>
        <div class="carousel-inner">
            <div class="item"><img src="/./images/slideshow/1.jpg" alt="" ></div>
            <div class="item"><img src="/./images/slideshow/2.jpg" alt="" ></div>
            <div class="item"><img src="/./images/slideshow/3.jpg" alt="" ></div>
            <div class="item active"><img src="/./images/slideshow/4.jpg" alt="" ></div>
            <div class="item"><img src="/./images/slideshow/5.jpg" alt="" ></div>
            <div class="item"><img src="/./images/slideshow/6.jpg" alt="" ></div>
            <div class="item"><img src="/./images/slideshow/7.jpg" alt="" ></div>
            <div class="item"><img src="/./images/slideshow/8.jpg" alt="" ></div>
            <div class="item"><img src="/./images/slideshow/9.jpg" alt="" ></div>
        </div>
        <a class="left carousel-control" href="#zkanocaCarousel2" data-slide="prev">‹</a>
        <a class="right carousel-control" href="#zkanocaCarousel2" data-slide="next">›</a>
    </div>
</div>
<script>
    $(function(){ 
        $.noConflict(); 
        $('#zkanocaCarousel2').carousel();
    });
 </script>

2 个答案:

答案 0 :(得分:0)

Boostrap 3支持多个幻灯片?

答案是否定的。使用Bootstrap 3的通用轮播插件无法实现您所寻找的效果。但是,这是一个简单的jQuery插件,似乎完全符合您的要求http://sorgalla.com/jcarousel/

答案 1 :(得分:0)

经过深入调查后,我注意到K2调用另一个jQuery库,导致我猜对了冲突。然后我完全卸载了K2。现在没关系。