BootStrap 4.3.1 Carousel增加淡入淡出效果

BootStrap 是一款非常受欢迎的前端框架,更新也很积极,BootStrap 4.3.1 更新轮播图增加了新功能

  1. 淡入淡出效果
  2. 轮播图停留时间
/**
* 淡入淡出代码结构
*
* @author 智慧宫
* @link   https://www.hanost.com
*/
<div id="carouselExampleSlidesOnly" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
        <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>
  • 更新您的 JS 和CSS文件,本文底部提供下载链接;
  • 添加Class属性.carousel-fade ,即可实现淡入淡出效果,data-interval="10000"是每张轮播图持续时间,单位为ms(毫秒)。

效果查看

代码下载

相关文章

发表评论

#