Tip/라이브러리

swiper.js 슬라이더 사용법 (v11.0.5)

2024. 1. 23.

Swiper 슬라이더

모바일 터치 슬라이더 라이브러리로, 웹 및 모바일 앱에서 사용자에게 매끄러운 슬라이드 기능을 제공하며 스와이프 기능이 있다. 다양한 환경에서 슬라이드 쇼, 갤러리, 프로모션 배너, 웹 애플리케이션 등을 만들 때 사용한다. 사용하기 쉽고 다양한 옵션을 제공하여 다양하게 디자인 할 수 있다.

이미지, 텍스트, 비디오 등 다양한 형식의 콘텐츠를 슬라이드로 표시할 수 있다. 이를 통해 다양한 형식의 콘텐츠를 시각적으로 효과적으로 전달할 수 있다.
터치 및 드래그 동작을 통해 사용자에게 직관적인 인터랙션을 제공한다. 사용자는 쉽게 슬라이드를 넘겨 다음 또는 이전 콘텐츠로 이동할 수 있다.
자동 재생 및 루프 기능을 제공하여 사용자가 직접 조작하지 않아도 슬라이드가 자동으로 전환되도록 할 수 있다.
다양한 맞춤 설정 옵션과 테마를 제공하여 디자인을 조정하고 앱 또는 웹 페이지에 적합하게 사용할 수 있다.
다양한 디바이스 및 화면 크기에 대응하여 반응형 디자인을 제공한다. 이는 모바일 앱 및 웹 페이지에서 일관된 사용자 경험을 보장한다.

사용법

라이브러리 추가하기

<head></head> 태그 사이에 입력한다.

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
</head>

파일 직접 다운로드하기 https://www.jsdelivr.com/package/npm/swiper

html 작성하기

<body></body> 태그 사이에 입력한다

<body>
    <!-- 슬라이더 메인 컨테이너 -->
    <div class="swiper">
      <!-- 필수 래퍼 : swiper-wrapper -->
      <div class="swiper-wrapper">
        <!-- 슬라이드 -->
        <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>
</body>

css 작성하기

<style></style> 태그 사이, 또는 외부 css파일에 입력한다

/* swiper 크기외에 부가적인 요소는 디자인에 따라 추가 */
.swiper {
  width: 600px;
  height: 300px;
}

js 작성하기

<script></script> 태그 사이, 또는 외부 scipt파일에 입력한다

const swiper = new Swiper('.swiper', {
  direction: 'vertical',
  loop: true,
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

자주쓰는 옵션

옵션명	설명
slidesPerView	슬라이드 노출 갯수 (기본값 1)
spaceBetween	슬라이드 간격 (기본값 0, 단위 px)
autoplay	자동 슬라이드 autoplay: { delay: 5000, disableOnInteraction: false // 필수 }
direction	슬라이드 방향 'horizontal', 'vertical' (기본값 horizontal)
effect	슬라이드 방식 'slide', 'fade', 'cube', 'coverflow', 'flip', 'creative' (기본값 slide)
loop	연속 슬라이딩 'true', 'false' (기본값 false)
navigation	슬라이드 좌우 화살표 navigation: { nextEl: '.swiper-button-next', // 클래스명 변경가능 prevEl: '.swiper-button-prev', },
pagination	슬라이드 페이징 pagination: { el: '.swiper-pagination', // 클래스명 변경가능 type: 'bullets', // 'bullets', 'fraction', 'progressbar', 'custom' },
speed	슬라이드 속도 (기본값 300)

참고사이트

Swiper Demos

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

저작자표시 비영리 변경금지

닌니디자인의 포스팅을 검색 해주세요.