scss CSSスライダー

Posted 2021-05-17

<div class="slider-wrap">
    <ul class="slider-lists">
        <li class="slider-item slider-item_1"></li>
        <li class="slider-item slider-item_2"></li>
        <li class="slider-item slider-item_3"></li>
    </ul>
</div>

.slider {
  &-wrap {
    height: 200px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    @include mq-up(sp) {
      height: 400px;
    }
    @include mq-up(tb) {
      height: 90vh;
    }
  }
  &-lists {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  &-item {
    background-size: cover;
    width: 100%;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    animation-iteration-count: infinite;
    animation-duration: 24s;
    @include mq-up(sp) {
      height: 400px;
    }
    @include mq-up(tb) {
      height: 90vh;
    }
    &_1 {
      background-image: url(../images/firstview-slide-01.jpg);
    }
    &_2 {
      background-image: url(../images/firstview-slide-02.jpg);
    }
    &_3 {
      background-image: url(../images/firstview-slide-03.jpg);
    }
    @for $value from 1 through 3 {
      &:nth-child(#{$value}) {
        //background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/381167/animal#{$value}.jpg");
        @if $value % 2 == 0 {
          //偶数
          animation-name: slider-zoomout;
        }
        @else {
          //奇数
          animation-name: slider-zoomin;
        }
        @if $value != 1 {
          //最初以外は透過
          opacity: 0;
        }
        animation-delay: #{($value*8-11)}s; //-3からスタートして、8づつ加算する
      }
    }
    img {
      width: 130%;
    }
  }
}
// 5~8秒の間だけ透過解除
@keyframes slider-zoomin {
  0% {
    opacity: 0;
    transform: scale(1.0);
  }
  20.83% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}
@keyframes slider-zoomout {
  0% {
    opacity: 0;
    transform: scale(1.3);
  }
  20.83% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: scale(1.0);
  }
}