Question

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

Answer 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/

Bootstrap轮播不工作（不滑动）

1 个答案: