引导轮播不工作（它不滑动）答案

【问题标题】：Bootstrap carousel not working (Its not sliding)引导轮播不工作（它不滑动）
【发布时间】：2017-12-19 16:23:28
【问题描述】：

<link href="~/assets/css/bootstrap.min.css" rel="stylesheet" />
<div id="myCar" class="carousel slide" data-ride="carousel" style="height: 100%;" >
    <!-- Wrapper for slides -->
    <div id="myNewCar" class="carousel-inner" style="height: 100%; ">
       <div class="item active">
            <img src="~/assets/images/full-screen-image-3.jpg" class="img-responsive" />
        </div>

        <div class="item">
            <img src="~/assets/images/sidebar-1.jpg" class="img-responsive" />
        </div>

        <div class="item">
            <img src="~/assets/images/sidebar-5.jpg" class="img-responsive" />
        </div>
    </div>

</div>
<script src="~/assets/js/core/jquery.3.2.1.min.js"></script>
<script src="~/assets/js/core/bootstrap.min.js"></script>

我在我的 asp.net mvc 部分视图中使用引导轮播，但滑块中的图像没有滑动它只显示第一张图像

【问题讨论】：

您在控制台（chrome 开发者工具）中看到任何错误吗？
是的，控制台有很多错误
哪个javascript代码？
@Warda 将轮播功能粘贴到 Bootply 时；如果你有控制台错误提示其他一些 JS 存在冲突，或者你没有正确链接你的 CSS 或 JS。
如果我在 mvc 的布局页面中链接了引导 js 文件或 css 文件，是否需要将其粘贴到主视图或部分视图中

标签： javascript jquery css twitter-bootstrap bootstrap-4

【解决方案1】：

Bootstrap 4 将 .item 更改为 .carousel-item。更新您的 HTML 以反映从 BS3 到 BS4 的迁移，您的轮播将按预期工作。所以改变：

<div class="item active">
  <img src="~/assets/images/full-screen-image-3.jpg" class="img-responsive" />
</div>

到：

<div class="carousel-item active">
  <img src="~/assets/images/full-screen-image-3.jpg" class="img-responsive" />
</div>

并为幻灯片的每次迭代重复。有关 Bootstrap 4s Carousel 组件的更多信息，请参考当前版本 (4.0.0-beta2) 的文档：

https://getbootstrap.com/docs/4.0/components/carousel/

【讨论】：