Swiper

Swiper is the most modern mobile touch slider and framework with hardware accelerated transitions. It offers optimized sliding capabilities for responsive websites and mobile applications, enhancing user interfaces.

Latest Ver 11.0.5

Homepage

Github

40,880

A Dazzling Variation at Your Fingertips

Create a smooth and engaging web experience with Swiper.

Swiper is a modern touch slider library for enhancing user interfaces in mobile and web applications.

CDN Download

License: (GPL OR MIT)

Asset Type :

View All Versions

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

⚠️ Some code, including import statements, may not run properly on jsFiddle. If it fails to execute, please copy the code and try it in your own environment.

📄 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',
  },
});