偶数幻灯片被隐藏在Bootstrap的轮播中

Question

I have created a slideshow module for joomla 2.5.x/3.x. It reads image files in specified directory and shows slides. Today I wanted to use it in another template. Joomla shows my slideshow module well but even numbered slides are hidden. 1st is shown and 2nd is hidden, 3rd is shown and 4th is hidden and so on.

My html output is as the following:

<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 support multiple slide ?

the answer is no. The effect you are looking for is not possible using Bootstrap 3's generic carousel plugin. However, here's a simple jQuery plugin that seems to do exactly what you want http://sorgalla.com/jcarousel/

Answer 2

After a deep investigation, I have noticed that K2 calls another jQuery library which causes confliction as I guessed. Then I have uninstalled K2 completely. Now it is OK.