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