scss 带褪色的Bootstrap Carousel

Posted 2021-05-17

/* Hero Carousel
------------------------------------------------------------------------------*/
$('#carousel').carousel();

<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="3000">
    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
    </ol>
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#carousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#carousel" data-slide="next">&rsaquo;</a>
</div>

/* 
  ** Bootstrap Carousel with Fade Effect 
*/
.carousel-fade {
  .carousel-inner {
      .item {
          transition-property: opacity;
      }
      
      .item,
      .active.left,
      .active.right {
          opacity: 0;
      }

      .active,
      .next.left,
      .prev.right {
          opacity: 1;
      }

      .next,
      .prev,
      .active.left,
      .active.right {
          left: 0;
          transform: translate3d(0, 0, 0);
      }
  }

  .carousel-control {
      z-index: 2;
  }
}

html, 
body, 
.carousel, 
.carousel-inner, 
.carousel-inner .item {
  height: 100%;
}

.item {
  &:nth-child(1) {
    @include backImage('../img/hero_bg-01.jpg', 0.4); // from Mixins (url, opacity)
  }
  &:nth-child(2) {
    @include backImage('../img/hero_bg-02.jpg', 0.4); // from Mixins (url, opacity)
  }
  &:nth-child(3) {
    @include backImage('../img/hero_bg-03.jpg', 0.3); // from Mixins (url, opacity)
  }
}