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(毫秒)。

效果查看

代码下载

相关文章

如果您觉得有用就请点赞和分享
版权声明: 本文由 智慧宫 整理发表,转载请注明出处

发表评论