html - Bootstrap旋转木马不想滑动

早上，

我有一个带有3行的轮播，每行包含8个缩略图。我使用了该轮播工具来构建它，但是由于某种原因它无法正常工作。

http://bootsnipp.com/snipps/thumbnail-carousel?codekitCB=399456659.566563

我的代码：

<div class="container">
<div id="myCarousel" class="matrix matrix-scroller carousel slide">
<!-- Carousel items -->

    <div class="row">
        <div class="carousel-inner">
            <ul class="unstyled inline">
                <div class="item active">
                    <div class="row">
                        <li class="square cyan span1"><a href="#"><img class="square_image" alt="" data="1" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square orange span1"><a href="#"><img class="square_image" alt="" data="1" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square green text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span txt-data="1" class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square magenta span1"><a href="#"><img class="square_image" alt="" data="1" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square yellow span1"><a href="#"><img class="square_image" alt="" data="1" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square cyan span1"><a href="#"><img class="square_image" alt="" data="2" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square orange text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span txt-data="2" class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square green span1"><a href="#"><img class="square_image" alt="" data="2" src="images/content/dummy-man01.png"/></a></li>
                    </div>
                </div>

                <div class="item">
                    <div class="row">
                        <li class="square magenta text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square orange text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square green span1"><a href="#"><img class="square_image" alt="" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square orange text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square green text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square yellow span1"><a href="#"><img class="square_image" alt="" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square cyan span1"><a href="#"><img class="square_image" alt="" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square orange span1"><a href="#"><img class="square_image" alt="" src="images/content/dummy-man01.png"/></a></li>
                    </div>
                </div>

                <div class="item">
                    <div class="row">
                        <li class="square green span1"><a href="#"><img class="square_image" alt="" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square orange span1"><a href="#"><img class="square_image" alt="" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square cyan text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square orange text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square green span1"><a href="#"><img class="square_image" alt="" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square green text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square orange text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square cyan text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                    </div>
                </div>
            </ul>
        </div>
        <!-- carousel nav-->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev" ></a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next" ></a>
        <!--/carousel-->
    </div><!--/row-->
</div><!--/myCarousel-->

最佳答案

本以为我会将其放在答案中并提供代码，但是我认为这是因为您将<ul>直接嵌套在“旋转木马内部”内，而它应该直接移至“项目”上。

另外，您也没有在代码中包含它，因此只想确保您在页面中包含bootstrap和jquery并添加此行以及所需的CSS：

<script type="text/javascript">
$(document).ready(function() {
    $('#myCarousel').carousel({
    interval: 10000
    })
});
</script>

试试看，看看是否可行：

<div class="container">
<div id="myCarousel" class="matrix matrix-scroller carousel slide">
<!-- Carousel items -->

    <div class="row">
        <div class="carousel-inner">
             <div class="item active">
                <div class="row">
                     <ul class="unstyled inline">
                        <li class="square cyan span1"><a href="#"><img class="square_image" alt="" data="1" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square orange span1"><a href="#"><img class="square_image" alt="" data="1" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square green text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span txt-data="1" class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square magenta span1"><a href="#"><img class="square_image" alt="" data="1" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square yellow span1"><a href="#"><img class="square_image" alt="" data="1" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square cyan span1"><a href="#"><img class="square_image" alt="" data="2" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square orange text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span txt-data="2" class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square green span1"><a href="#"><img class="square_image" alt="" data="2" src="images/content/dummy-man01.png"/></a></li>
                        </ul>
                    </div>
                </div>

                <div class="item">
                    <div class="row">
                     <ul class="unstyled inline">
                        <li class="square magenta text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square orange text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square green span1"><a href="#"><img class="square_image" alt="" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square orange text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square green text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square yellow span1"><a href="#"><img class="square_image" alt="" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square cyan span1"><a href="#"><img class="square_image" alt="" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square orange span1"><a href="#"><img class="square_image" alt="" src="images/content/dummy-man01.png"/></a></li>
                        </ul>
                    </div>
                </div>

                <div class="item">
                    <div class="row">
                     <ul class="unstyled inline">
                        <li class="square green span1"><a href="#"><img class="square_image" alt="" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square orange span1"><a href="#"><img class="square_image" alt="" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square cyan text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square orange text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square green span1"><a href="#"><img class="square_image" alt="" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square green text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square orange text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square cyan text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        </ul>
                    </div>
                </div>
            </ul>
        </div>
        <!-- carousel nav-->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev" ></a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next" ></a>
        <!--/carousel-->
    </div><!--/row-->
</div><!--/myCarousel-->