javascript - Bootstrap 的轮播中隐藏了偶数张幻灯片

Question

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

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

Answer 1

Boostrap 3 支持多张幻灯片吗？

答案是否定的。使用 Bootstrap 3 的通用轮播插件无法实现您正在寻找的效果。然而，这里有一个简单的 jQuery 插件，它似乎完全可以满足您的需求 http://sorgalla.com/jcarousel/