bootstrap4-Carousel 轮播

最新推荐文章于 2024-06-26 06:23:28 发布

淘气↘孩ゑ争气ふ

最新推荐文章于 2024-06-26 06:23:28 发布

阅读量846

点赞数

本文链接：https://blog.csdn.net/qq_44563258/article/details/90286361

版权

本文介绍了如何使用Bootstrap4的Carousel组件创建循环滚动的幻灯片。强调了点击id与对应的关系，以及.active样式的必要性。内容包括幻灯片的HTML结构，如carousel-indicators和carousel-item的使用，以及.d-block样式用于修正图像对齐问题。通过详细代码示例，帮助读者理解并实现轮播效果。

摘要由CSDN通过智能技术生成

开发工具与关键技术：Visual Studio 2015
作者：杨灵武
撰写时间：2019/05/17
1.这是一个循环滚动的幻灯片组件，可以使用文本、图象水平不间断滚动，如同旋转木马一般。
点击的id=“carouselIndicators"要和”#carouselIndicators"相对应
将 .active 样式添加到其中一个幻灯片（一般第一张），否则轮播效果将无法正常运行（展现）。
下面是部分代码块详情：
< div id=“carouselIndicators” class=“carousel slide” data-ride=“carousel”>
< ol class=“carousel-indicators”>
< li data-target="#carouselIndicators" data-slide-to=“0” class=“active”> < /li>
< /ol>
详细的代码见下面图片，
在这里插入图片描述
2.这是一个经典的幻灯片示例，请注意轮播上的图像引用了 .d-block 样式，以修正浏览器预设的图像对齐带来的影响。
< div class=“carousel-inner”>
< div class=“carousel-item active”>
< img class=“d-block w-100” src="~/Conte