Swiper - 자바스크립트 슬라이드(slide) 라이브러리

자바스크립트 슬라이드(slide) 라이브러리

 

 

Swiper

: 유연하고 사용하기 쉬운 자바스크립트 슬라이드 라이브러리

Swiper - The Most Modern Mobile Touch Slider

 

 

 

설치

CDN 방식

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

 

 

npm 방식

1. npm 설치

npm install swiper

 

2. JS 파일에서 가져오기

import Swiper from 'swiper';
import 'swiper/swiper-bundle.css';

 

 

 

HTML 구조

• swiper > swiper-wrapper > swiper-slide

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

 

 

 

Javascript

• new Swiper(선택자, 옵션) 함수 사용
• Swiper의 옵션들

new Swiper('.swiper', {
  autoplay: { // 자동 재생
    delay: 3000 // 재생 시간
  },
  
  loop: true, // 반복 재생
  speed: 2000, // 재생 속도
  parallax: true, // 스크롤링 효과(배경 이미지나 다른 요소들이 다른 속도로 움직이게 함)
  
  pagination: { // 페이지 버튼 설정
    el: '.pagination', // 페이지 번호 요소 선택자
    clickable: true, // 사용자가 클릭 제어 가능
    bulletClass: 'bullet', // 페이지네이션(bullet) 요소에 적용할 클래스명 설정
    bulletActiveClass: 'is-active', // 활성화 된 페이지네이션(bullet) 요소에 적용할 클래스명 설정
    renderBullet: function (index, className) { // 페이지네이션(bullet) 요소를 커스터마이즈하여 렌더링할 때 사용
      return `
        <span class="${className}">
          <img src="./assets/part01/${data[index].src}" alt="${data[index].alt}" />
        </span>
      `
    }
  }
})

 

 

---

 

slick slider

slick - the last carousel you'll ever need

• 제이쿼리를 사용하지 않으면 사용 X

 

 

Owl Carousel

Home | Owl Carousel | 2.3.4