Bootstrap 轮播bannner滚动总结

    技术2022-07-11  109

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

    <div id="myCarousel" class="carousel slide">     <!-- 轮播(Carousel)指标 -->     <ol class="carousel-indicators">         <li data-target="#myCarousel" data-slide-to="0" class="active"></li>         <li data-target="#myCarousel" data-slide-to="1"></li>         <li data-target="#myCarousel" data-slide-to="2"></li>     </ol>        <!-- 轮播(Carousel)项目 -->     <div class="carousel-inner">         <div class="item active">             <img src="www.siliconrxr.com/wp-content/uploads/2014/07/slide1.png" alt="First slide">         </div>         <div class="item">             <img src="www.siliconrxr.com/wp-content/uploads/2014/07/slide2.png" alt="Second slide">         </div>         <div class="item">             <img src="www.siliconrxr.com/wp-content/uploads/2014/07/slide3.png" alt="Third slide">         </div>     </div>     <!-- 轮播(Carousel)导航 -->     <a class="carousel-control left" href="#myCarousel"         data-slide="prev"> <span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>     <a class="carousel-control right" href="#myCarousel"         data-slide="next">›</a> </div>

    通过 data 属性:使用 data 属性可以很容易控制轮播(Carousel)的位置。 属性 data-slide 接受关键字 prev 或 next,用来改变幻灯片相对于当前位置的位置。 使用 data-slide-to 来向轮播传递一个原始滑动索引,data-slide-to="2" 将把滑块移动到一个特定的索引,索引从 0 开始计数。 data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。

    Processed: 0.018, SQL: 9