Bootstrap 轮播不想滑动

【问题标题】：Bootstrap carousel doesn't want to slideBootstrap 轮播不想滑动
【发布时间】：2013-08-29 17:06:45
【问题描述】：

早上，

我有一个 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-->

【问题讨论】：

  • 尝试确保
    直接在
    我认为这行最有可能搞砸了：“
      " 但也请提供您的 JQuery
  • 另外你不应该在
      里面有
      ，你应该在
        外面或者在
      • 里面有 div

标签： html css twitter-bootstrap carousel


【解决方案1】：

以为我会将其放入答案并提供代码，但我认为这是因为您将 &lt;ul&gt; 直接嵌套在“carousel-inner”内，而它应该直接移动到“项目”上。

你也没有在你的代码中包含它，所以只是想确保你在你的页面中包含了 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-->

【讨论】：

  • 当然，只是我自己想出来的。编辑其他人的代码并不好玩！谢谢！
猜你喜欢
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode