我想自定义bootstrap轮播

Question

有没有办法修改bootstrap轮播。我想给幻灯片淡入淡出而不是从左到右或从右到左滑动的效果。

Answer 1

是的，您可以通过覆盖CSS来修改引导程序轮播。在HTML页面中添加以下<style>标记，它会淡入/淡出轮播而不是滑动效果。

<style>
/* Fade transition for carousel items  */ 
.carousel .item {
  left: 0 !important;
   -webkit-transition: opacity .4s; /*adjust timing here */
     -moz-transition: opacity .4s;
       -o-transition: opacity .4s;
          transition: opacity .4s;
 }
.carousel-control {
       background-image: none !important; /* remove background gradients on controls */
 }
/* Fade controls with items */
.next.left,
.prev.right {
opacity: 1;
z-index: 1;
}
.active.left,
.active.right {
opacity: 0;
z-index: 2;
 }
</style>