Swiper

Swiper는 하드웨어 가속 전환을 지원하는 최신 모바일 터치 슬라이더 및 프레임워크입니다. 이 라이브러리는 반응형 웹사이트 및 모바일 애플리케이션에 최적화된 슬라이드 기능을 제공하여 사용자 인터페이스의 개선을 도와줍니다.

Latest Ver 11.0.5

Homepage

Github

40,880

손끝에서 펼쳐지는 화려한 변주

Swiper로 부드럽고 매력적인 웹 경험을 구현하세요.

Swiper는 모바일과 웹 애플리케이션의 유저 인터페이스 향상을 위한 현대적인 터치 슬라이더 라이브러리입니다.

CDN 다운로드

License: (GPL OR MIT)

Asset Type :

전체 버전 보기

https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.js

https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js

https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css

https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css

https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js.map

https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.mjs

https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.mjs.map

https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.mjs

Sample Code

⚠️ import 문을 포함한 일부 코드는 jsFiddle에서 정상 실행되지 않을 수 있습니다. 실행 오류가 발생할 경우 코드 복사 후 직접 실행해보세요.

📄 HTML
<div class='swiper-container'>
  <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>
  <!-- Add Pagination -->
  <div class='swiper-pagination'></div>
  <!-- Add Navigation -->
  <div class='swiper-button-prev'></div>
  <div class='swiper-button-next'></div>
</div>

🎨 External CSS
<link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet">

🧩 External JS
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

⚙️ JavaScript
var swiper = new Swiper('.swiper-container', {
  spaceBetween: 30,
  centeredSlides: true,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});