<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轮播但是滑块中的图像没有滑动它只显示第一张图像
答案 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)的文档: