패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. Swiper 라이브러리를 이용해서 만든 다중요소 슬라이드에 대해 적어본다.

HTML

• 10개의 이미지가 슬라이드 안에서 반복적으로 돌아가도록 하기 위한 HTML 요소 작성!
• 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>

JS

• new 생성자를 통해 Swiper 함수를 생성해주었다
• new Swiper(선택자, 옵션)의 문법을 준수하여, 선택자를 넣고 옵션들을 지정해줌
  1. direction은 수평(auto값)이기 때문에 넣지 않았다
  2. 스와이퍼가 돌아가도록 loop: true;를 작성하였다
  3. spaceBetween: 30 > 이미지들 사이의 간격은 30으로 주었다
  4. slidesPerView: 5 > 슬라이드 1루프 돌아가는 delay 시간을 5초로 주었다
  5. navigation 버튼 옵션을 지정해주었다

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

CSS

• 요소를 부모요소 기준으로 수직 가운데 배치를 하기 위해서는 3가지가 필요하다
  1. position: absolute;
  2. 세로 너비(수평 가운데 배치는 가로너비)
  3. margin:auto;

/* 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: 2px solid #fff;
    border-radius: 50%;
    outline: none;
    color: #fff;
    opacity: .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;
}