다중 요소 슬라이드 Swiper

1. Swiper를 이용하여 다섯개의 요소가 한 화면에 보이도록 배치

 

2. Swiper를 제어하는 prev, next 버튼 만들기

 

 

 

---

 

1. Swiper를 이용하여 다섯개의 요소가 한 화면에 보이도록 배치

<!-- AWARDS -->
 <section class="awards">
  <div class="inner">

    <div class="swiper-container">
      <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>

new Swiper('.awards .swiper-container', {
  slidesPerView: 5, // 한번에 보이는 개수
  spaceBetween: 30, // 요소 간 간격 (px)
  autoplay: true,
  loop: true,
  navigation: {
    prevEl: '.awards .swiper-prev',
    nextEl: '.awards .swiper-next'
  }
});

 

2. Swiper를 제어하는 prev, next 버튼 만들기

- css에서 style과 위치를 지정해줘야 함

/* AWARDS */
.awards {
  background-color: #272727;
}
.awards .inner {
  padding: 40px 0;
}
.awards .swiper-container {
  width: 100%;
  height: 40px;
}
.awards .swiper-prev,
.awards .swiper-next {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid #fff;
  outline: none;
  opacity: .3;
  cursor: pointer;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top:0;
  bottom: 0;
  margin: auto;
}
.awards .swiper-prev:hover,
.awards .swiper-next:hover {
  color: #333;
  background-color: #fff;
}
.awards .swiper-prev {
  left: -100px;
}
.awards .swiper-next {
  right: -100px;
}