[Javascript] SwiperJs로 스크롤되는 3d 캐러셀 만들기

SwiperJs로 이렇게 둥글게 위아래로 스크롤되는 3d 캐러셀을 만들어보았다.

 

HTML

  <div class="section">

    <div class="swiper">

      <div class="swiper-wrapper">

        <div class="swiper-slide">

          <div class="content"></div>

        </div>

        <div class="swiper-slide">

          <div class="content"></div>

        </div>

        <div class="swiper-slide">

          <div class="content"></div>

        </div>

        <div class="swiper-slide">

          <div class="content"></div>

        </div>

        <div class="swiper-slide">

          <div class="content"></div>

        </div>

        <div class="swiper-slide">

          <div class="content"></div>

        </div>

      </div>

    </div>

  </div>

큰 섹션박스에 swiper기본 템플릿을 넣어주었다.

 

CSS

.section {

  overflow: hidden;

  width: 100vw;

  height: 100vh;

}

.swiper {

  width: 100vw;

  height: 80vh;

  overflow: visible;

  margin-top: 10vh;

}

.swiper-slide {

  width: 100%;

  height: 80%;

  display: flex;

  align-items: center;

  justify-content: center;

}

.content {

  width: 900px;

  height: 500px;

  border: 6px solid black;

}

.swiper-slide-prev{

  transform: translate3d(0px, 75.7062px, -108.152px) rotateX(32.4455deg) rotateY(0deg) scale(0.9) !important;

}

.swiper-slide-next{

  transform: translate3d(0px, -81.4988px, -116.427px) rotateX(-34.928deg) rotateY(0deg) scale(0.9) !important;

}

섹션에는 화면의 뷰포트에 꽉 차게 한 후 overflow:hidden을 해주었고, swiper 컨테이너에는 height값을 조금 작게해 위아래로 슬라이드가 조금 보이게끔 overflow:visible을 해주었다.

그리고 active되기 전과 후의 슬라이드의 transform값을 찾아 나머지는 그대로 놔두고 scale값만 조정해주었다. scale값이 조정되지 않았을 땐 rotate값 때문에 active된 슬라이드보다 더 크게 보여서 scale값을 0.9로 조절해 줄여주었다.

 

JAVASCRIPT

const swiper = new Swiper('.swiper', {

  mousewheel: true,

  direction: 'vertical',

  loop: true,

  centeredSlides: true,

  slidesPerView: 'auto',

  slideToClickedSlide: true,

  effect: 'coverflow',

  spaceBetween: 80,

  coverflowEffect: {

    rotate: -30,

    slideShadows: false,

  },

});

위에서부터 해석하자면

mousewheel: true => 마우스휠로 스크롤하면서 슬라이드 가능하게하기

direction: 'vertical' => 상하로 슬라이드되게 하기

loop: true => 지정해놓은 슬라이드가 끝나도 무한으로 슬라이드 되게 하기

centeredSlides: true => 슬라이드 중간으로 오게 하기

slidesPerView: 'auto' => 화면에 보이는 슬라이드 자동으로 맞추기

slideToClikedSlide: true => 이전, 이후 슬라이드 클릭하면 중간으로 오게하기

effect: 'coverflow' => 슬라이드가 3d느낌나게 하는 핵심 이펙트

spaceBetween: 80 => 슬라이드간 간격

coveflowEffect: { =>coverflow 효과 지정

 rotate: -30 => 회전율

 slideShadows: false => 슬라이드의 그림자 설정

}

 

이렇게 설명하면 멋진 3d 캐러셀을 만들 수 있다~ 이말!

이런건 멋지게 꾸미면 한 번씩 쓰일 수도 있을거같다.

실력을 좀 더 많이 키워서 라이브러리없이도 한 번 만들어봐야겠다.