[HTML/CSS][Ch9][스타벅스] 다중 요소 슬라이드

어워즈 Swiper 사용

index.html -> 어워즈 HTML 추가

<!--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="대통령 표창 (3년 연속)" />
          </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="KSI 1위 (5년 연속)" />
          </div>
          <div class="swiper-slide">
            <img src="./images/awards_slide8.jpg" alt="KS-SQI 1위 (5년 연속)" />
          </div>
          <div class="swiper-slide">
            <img src="./images/awards_slide9.jpg" alt="커피전문점 부문 (4년 연속)" />
          </div>
          <div class="swiper-slide">
            <img src="./images/awards_slide10.jpg" alt="동반성장 부문 (4년 연속)" />
          </div>
        </div>
      </div>

      <div class="swiper-prev">
        <span class="material-icons">arrow_back</span>
      </div>
      <div class="swiper-next">
        <span class="material-icons">arrow_forward</span>
      </div>

    </div>
  </section>

main.css -> 어워즈 CSS 추가

/*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;
  outline: none;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  opacity: .3;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .4s;
}
.awards .swiper-prev {
  left: -100px;
}
.awards .swiper-next {
  right: -100px;
}
.awards .swiper-prev:hover,
.awards .swiper-next:hover {
  background-color: #fff;
  color: #333;
}

main.js -> 어워즈 JavaScript 추가

/* 
* 어워즈 Swiper 
* */
new Swiper('.awards .swiper-container', {
  autoplay : true,        /* 자동재생 */
  loop : true,            /* 반복재생 */
  spaceBetween : 30,      /* 슬라이드 사이 여백(30px) */
  slidesPerView : 5,      /* 한번에 보여줄 슬라이드 개수 */
  pagination : {
    el : '.awards .swiper-pagination', /* 페이지 번호 요소 선택자 */
    clickable : true    /* 사용자의 페이지 번호 요소 제어 여부 */
  },
  navigation : {        /* 이전, 다음 슬라이드 네비 제공 */
    prevEl : '.awards .swiper-prev',    
    nextEl : '.awards .swiper-next'
  }
});

출력