html - Bootstrap カルーセルがスライドしたくない

Question

朝、

それぞれ 8 つのサムネイルを含む 3 行のカルーセルがあります。このカルーセルを使用してビルドしましたが、何らかの理由で機能しません。

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

Answer 1

私はそれを答えに入れてコードを提供すると思っていましたが<ul>、「アイテム」に直接移動する必要があるときに、「カルーセルインナー」内に直接ネストしているためだと思います。

また、コードに含めなかったので、ページにブートストラップと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-->