Bootstrap轮播不工作(不滑动)

时间:2017-12-19 16:23:28

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

<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局部视图中使用bootstrap轮播但是滑块中的图像没有滑动它只显示第一张图像

1 个答案:

答案 0 :(得分: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/