요소 슬라이드 - 프로모션 이미지 슬라이드 (Swiper)

swiper를 이용해 프로모션 이미지 슬라이드를 구현한다.
좌우로 넘어갈 수 있는 화살표 버튼과, 아래에 페이지 네비게이션도 구현.

코드

HTML

<div class="promotion">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="./images/promotion_slide1.jpg" alt="2017년 뉴이어, 스타벅스와 함께 즐겁고 활기차게 시작하세요!" />
            <a href="javascript:void(0)" class="btn">자세히 보기</a>
          </div>
          <div class="swiper-slide">
            <img src="./images/promotion_slide2.jpg" alt="기간 내 스타벅스 카드 e-Gift를 3만원 이상 선물 시, 아메리카노 e-쿠폰을 드립니다." />
            <a href="javascript:void(0)" class="btn">자세히 보기</a>
          </div>
          <div class="swiper-slide">
            <img src="./images/promotion_slide3.jpg" alt="뉴이어 푸드와 제조 음료를 세트로 구매 시, 뉴이어 음료 BOGO(1+1)쿠폰을 드립니다." />
            <a href="javascript:void(0)" class="btn">자세히 보기</a>
          </div>
          <div class="swiper-slide">
            <img src="./images/promotion_slide4.jpg" alt="신년 MD 상품 포함 3만원 이상 구매 고객께 아메리카노(톨사이즈) 쿠폰을 드립니다." />
            <a href="javascript:void(0)" class="btn">자세히 보기</a>
          </div>
          <div class="swiper-slide">
            <img src="./images/promotion_slide5.jpg" alt="2017 DIGITAL LUCKY DRAW 100% 당첨의 행운을 드립니다!" />
            <a href="javascript:void(0)" class="btn">자세히 보기</a>
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></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>

CSS

.notice .promotion {
  height: 693px;
  background-color: #f6f5ef;
  position: relative;
  transition: height .4s;
  overflow: hidden;
}

.notice .promotion .swiper {
  width: calc(819px * 3 + 20px);
  height: 553px;
  position: absolute;
  top: 40px;
  left: 50%;
  margin-left: calc((819px * 3 + 20px) / -2);
}

.notice .promotion .swiper-slide {
  opacity: .5;
  transition: opacity 1s;
  position: relative;
}

.notice .promotion .swiper-slide-active {
  opacity: 1;
}

.notice .promotion .swiper-slide .btn {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.notice .promotion .swiper-pagination {
  bottom: 40px;
  /* 이하의 내용은 자동 중앙 하단 정렬이 되는 버전 7에서는 불필요 */
  /* left: 0;
  right: 0; */
}

.notice .promotion .swiper-pagination .swiper-pagination-bullet {
  background-color: transparent;
  background-image: url('../images/promotion_slide_pager.png');
  width: 12px;
  height: 12px;
  margin-right: 6px;
  outline: none;
}

.notice .promotion .swiper-pagination .swiper-pagination-bullet:last-child {
  margin-right: 0;
}

.notice .promotion .swiper-pagination .swiper-pagination-bullet-active {
  background-image: url('../images/promotion_slide_pager_on.png');
}

.notice .promotion .swiper-prev,
.notice .promotion .swiper-next {
  width: 42px;
  height: 42px;
  border: 2px solid #333;
  border-radius: 50%;
  position: absolute;
  top: 300px;
  z-index: 1;
  cursor: pointer;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .4s;
}

.notice .promotion .swiper-prev {
  left: 50%;
  margin-left: -480px;
}

.notice .promotion .swiper-next {
  right: 50%;
  margin-right: -480px;
}

.notice .promotion .swiper-prev:hover,
.notice .promotion .swiper-next:hover {
  background-color: #333;
  color: #fff;
}

JS

new Swiper('.promotion .swiper', {
  // direction: 'horizontal', 기본값이므로 명시하지 않아도 괜찮음
  slidesPerView: 3, //한 번에 보여줄 슬라이드 개수
  spaceBetween: 10, //슬라이드 사이 여백
  centeredSlides: true, //1번 슬라이드가 가운데 보이기
  loop: true,
  autoplay: {
    delay: 1500
  },
  pagination: {
    el: '.promotion .swiper-pagination', //페이지 번호 요소 선택자
    clickable: true //사용자의 페이지 번호 요소 제어
  },
  navigation: {
    prevEl: '.promotion .swiper-prev',
    nextEl: '.promotion .swiper-next'
  }
});