Bootstrap - 轮播不起作用。显示所有图片但不显示动画答案

【问题标题】：Bootstrap - Carousel doesn't work. Show all pictures but without animationBootstrap - 轮播不起作用。显示所有图片但不显示动画
【发布时间】：2017-04-23 02:19:36
【问题描述】：

我是新手，刚开始学习引导程序。我现在发现了一个问题，我试图解决它大约一小时。我的旋转木马画廊不起作用。它一次显示所有图片。

这是我的代码： `

<div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div id="myowncarousel" class="carousel slide">
                        <ol class="carousel-indicators">
                          <li data-target="#myowncarousel" data-slide-to="0" class="active"></li>
                          <li data-target="#myowncarousel" data-slide-to="1"></li>
                          <li data-target="#myowncarousel" data-slide-to="2"></li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="item active">
                            <img src="img/banner_1.png" alt="">
                            </div>
                            <div class="item">
                            <img src="img/banner_2.png" alt="">
                            </div>
                            <div class="item">
                            <img src="img/banner_3.png" alt="">
                            </div>
                        </div>
                        <a class="left carousel-control" href="#myowncarousel" data-slide="prev">
                        <span class="icon-prev"></span></a>
                        <a class="right carousel-control" href="#myowncarousel" data-slide="next">
                        <span class="icon-next"></span></a>
                    </div>
                </div>
            </div>      
        </div>

` 非常感谢您的帮助！

编辑：

    <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta http-equiv="Refresh" content="30" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"/>
        <link href="css/style.css" type="text/css" rel="stylesheet"/>
      </head>
      <body>
...

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>

这就是我加载引导文件的方式。希望没事。

【问题讨论】：

您是否验证过引导程序在您的网站上运行？如果是这样，您应该检查项目上的元素并查看是否存在覆盖 css 规则 .carousel-inner > .item {display: none;} 的样式。另外，我认为 js 不会触发，除非你的元素上有 data-ride="carousel" 和 class="carousel slide"
你的代码很好，如果你正确加载了 js 和 css 文件，那么它应该可以工作，所以你可能没有以正确的方式加载一些东西

标签： html twitter-bootstrap carousel

【解决方案1】：

您在导入中使用 Bootstrap v4，但您的 html 代码为 Bootstrap 3

所以，要解决这个问题，你应该：

将 Bootstrap 3 添加到您的导入中
将代码更改为 bootstrap 4

jsfiddle

【讨论】：

哦...非常感谢。我不知道代码引导程序 3 和 4 之间存在差异。我现在在您的帮助下修复了它。再次感谢您！