다중 요소 슬라이드 (Swiper)

Swiper.js 를 이용해 다중 요소 슬라이드를 제작한다.

코드

HTML

<section class="awards">
    <div class="inner">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="./images/awards_slide1.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./images/awards_slide2.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./images/awards_slide3.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./images/awards_slide4.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./images/awards_slide5.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./images/awards_slide6.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./images/awards_slide7.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./images/awards_slide8.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./images/awards_slide9.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./images/awards_slide10.jpg" alt="" />
          </div>
        </div>
      </div>
      <div class="swiper-prev">
        <div class="material-icons">arrow_back</div>
      </div>
      <div class="swiper-next">
        <div class="material-icons">arrow_forward</div>
      </div>
    </div>
  </section>

CSS

.awards {
 background-color: #272727;
}

.awards .inner {
  padding: 40px 0;
}

.awards .swiper {
  width: 100%;
  height: 40px;
}

.awards .swiper-prev,
.awards .swiper-next {
  width: 42px;
  height: 42px;
  border: 2px solid #fff;
  border-radius: 50%;
  outline: none;
  color: #fff;
  opacity: 0.3;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

.awards .swiper-prev {
  left: -100px;
}

.awards .swiper-next {
  right: -100px;
}
.awards .swiper-prev:hover,
.awards .swiper-next:hover {
  background-color: #fff;
  color: #333;
}

JS

new Swiper('.awards .swiper', {
  // direction: 'horizontal',
  autoplay: true,
  loop: true,
  spaceBetween: 30,
  slidesPerView: 5,
  navigation: {
    prevEl: '.awards .swiper-prev',
    nextEl: '.awards .swiper-next'
  }
});