SCSS 이용하여 반응형 슬라이더 구현하기

소개

슬라이더 아이템수가 바뀔때마다 애니메이션 키프레임을 다시 계산 해주는게 번거로워서

SCSS를 이용하여 계산 부분을 함수화 시켰습니다. 아래사진은 완성된 슬라이더 모습입니다.

 

본론

HTML 구조 입니다

// .scene는 최상위 엘리멘트 입니다
<div class="scene">
   // .slider는 자식들로 .item을 가집니다.
  <div class="slider">
    // .item은 각각의 .slider 아이템들을 나타냅니다
    // 첫번째 .item 엘리멘트를 마지막에 추가합니다.
    // 첫부분과 끝부분 엘리멘트를 똑같이 해주면
    // 슬라이딩 애니메이션이 반복될때 무한히 반복하는 효과를 줄수 있습니다.
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-1">1</div>
  </div>
</div>

 

SCSS 부분 입니다.

// 각변수들은 색갈을을 나타냅니다.
$slider:#FFF493;
$primary:#87E892;
$secondary:#A1E3FF;
$tertiary:#B187E8;

// SCSS list를 이용해서 각 색갈들을 할당 합니다.
$color-list: $primary, $secondary, $tertiary;

// .item의 총 갯수
$total: 3;
//.item의 총 갯수 + 1
$total-extra: $total + 1;

// .scene 가로세로 크기와 overflow를 설정 합니다.
.scene{
  max-width:300px;
  height:150px;
  overflow:hidden;
}

// width를 100% 와 총 .item의 갯수만큼 곱 합니다.
// flex를 사용해서 수평 정렬 합니다.
.slider {
  background-color: $slider;
  display: flex;
  width: 100% * $total-extra;
  height: 100%;
}

// flex 프로퍼티로 .item의 width를 정해줍니다.
.item{
  flex:1;
  font-size:2rem;
  color:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
}

// SCSS @for 반복문으로 각각 .item의 배경색을 정해줍니다
@for $i from 1 through $total{
  .item-#{$i}{
    background-color: nth($color-list, $i);
  }
}

 

.slider에 display와 .scene에 overflow 프로퍼티가 없을때

.slider에 display 프로퍼티를 flex로 설정해줄때

.scene에 overflow를 설정해줄때

SCSS로 @keyframes를 설정해줍니다

// $translate는 .item의 translateX 범위를 구한값 입니다.
// slider 애니메이션은 두가지 상태를 반복합니다
// 멈춰있는 상태($pause)와 움직이는 상태
// 멈춰있는 상태($pause)를 총시간의 90%로 잡고
// 이동하는 상태($slide)를 총시간의 10%로 잡았습니다.
// $pause는 .item이 멈춰 있어야할 시간입니다.
// $slide는 .item이 이동에 필요한 시간 입니다.
// $current는 각각의 프레임 변화값을 중첩해서 할당합니다.
$translate: 100% / $total-extra;
$pause: 90% / ($total);
$slide: 10% / ($total);
$current: 0%;
@keyframes slider {
  @for $i from 1 through $total {
    // 시작값을 정해줍니다
    @if $i - 1 == 0 {
      #{$current} {
        transform: translateX(0);
      }
    }
    
    // 멈춰있을때의 값을 계산합니다
    $current: $current + $pause !global;
    #{$current} {
      transform: translateX($translate * -($i - 1));
    }

    // 이동할대의 값을 계산합니다
    @if $i < $total {
      $current: $current + $slide !global;
      #{$current} {
        transform: translateX($translate * -$i);
      }
       // 끝 날때 프레임
    }  @else {
      100% {
        transform: translateX($translate * -$i);
      }
    }
  }
}

 

Conclusion

새로운 .item이 추가될때마다 $total의 값을 변경해주면 재계산되서 @keyframes가 생성됩니다.

CodePen

See the Pen Responsive Slider by thesoundfromthesky (@thesoundfromthesky) on CodePen.