스타벅스 클론코딩-9 (AWARDS)

 

MAIN CONTENT - AWARDS

 

특징

- 수평 슬라이드 형태로 보여짐

- 왼쪽과 오른쪽에 화살표 아이콘을 통해서 슬라이드처럼 이동

 

 <!-- 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">
        <div class="material-icons">arrow_back</div>
      </div>
      <div class="swiper-next">
        <div class="material-icons">arrow_forward</div>
      </div>

    </div>
  </section>

 

/* 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;
}

 

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