Swiper (요소 슬라이드)

01.수평 이미지 슬라이드

swiper Libraries

• Swiper
• Swiper.js
• cdn으로 제공하는 코드에는 원본이 있고 min 버전이 있는데, min 버전은 압축되어 조금더 최적화 되어 있어 min 버전을 활용하는 것을 추천
• JS 파일뿐만 아니라 CSS 파일에 대한 연결도 필요하므로 두개 모두 코드를 연결시켜 줄것!

  <link rel="stylesheet" href="https://unpkg.com/swiper@6.8.4/swiper-bundle.min.css" /> 
  <script src="https://unpkg.com/swiper@6.8.4/swiper-bundle.min.js"></script>

index.html

<div class="promotion">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img
          src="./images/promotion_slide1.jpg"
          alt="2021 뉴이어, 스타벅스와 함께 즐겁고 활기차게 시작하세요!"
        />
        <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>

main.css

.notice .promotion .swiper-slide {
  opacity: 0.3;
  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: auto;
}

main.js

• 수평 슬라이드
  

// new Swiper(선택자, 옵션)
new Swiper('.promotion .swiper-container', {
slidesPerView: 3, // 한번에 보여줄 슬라이드 개수
spaceBetween: 10, // 슬라이드 사이 여백
centeredSlides: true, // 1번 슬라이드가 가운데 부터 보이기
loop: true, // 반복 재생
autoplay: { delay: 5000 }, // autoplay: 자동 재생, delay: 지연시간
pagination: {
el: '.promotion .swiper-pagination', // 페이지 이동 버튼을 담을 태그
clickable: true // 페이지 이동 버튼 클릭 가능 여부
},
navigation: {
prevEl: '.promotion .swiper-prev', // 이전 요소
nextEl: '.promotion .swiper-next' // 다음 요소
}
});

• Pagination: 슬라이드가 몇개인지, 어떤 슬라이드가 focus되어 있는지 그리고 특정 슬라이드로 바로 이동할수 있는 UI이다.
• navigation : 다음 슬라이드로 이동하는 버튼

02.수직 슬라이드

• 수직 슬라이드
  

new Swiper('.swiper-container', {
  direction: 'vertical', // 수직 슬라이드
  autoplay: true, // 자동 재생 여부
  loop: true // 반복 재생 여부
});

• direction 속성 값에 vertical을 적어주면 수직 슬라이드가 됩니다.
• direction 속성 값에 horizontal을 적어주면 수평 슬라이드가 됩니다.
• 하지만 기본값으로 수평정렬이 적용되므로 수평정렬 할 경우에는 굳이 적어주지 않아도 됩니다.