エンジニアブログ

HOME > css > Swiper.js基本的な使い方カスタマイズ方法

Swiper.js基本的な使い方カスタマイズ方法

css
Swiper.js基本的な使い方カスタマイズ方法

Swiper.jsとは？

Swiper.jsは、モバイル対応のスライダーライブラリで、タッチデバイスにも対応しています。この記事では、Swiper.jsを使用してブログ記事のスライダーを作成する方法を紹介します。

スライダーの基本的な使い方

Swiper.jsの導入

Swiper.jsをダウンロードしてプロジェクトに組み込むか、CDNを使用して読み込みます。
今回はCDNを使用します。

<!-- cssの読み込み -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<!-- jsの読み込み -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

HTML

スライダー内に表示する要素を適切にHTMLで構築します。

<div class="swiper-container">
 <div class="swiper-wrapper">
  <div class="swiper-slide">
   <!-- Slide 1 のコンテンツ -->
   <img src="image1.jpg" alt="Slide 1">
   <h2>記事タイトル1</h2>
   <p>記事の概要や説明文</p>
  </div>
  <div class="swiper-slide">
   <!-- Slide 2 のコンテンツ -->
   <img src="image2.jpg" alt="Slide 2">
   <h2>記事タイトル2</h2>
   <p>記事の概要や説明文</p>
  </div>
 </div>
    <!-- ページネーションやナビゲーションを追加する場合はここに追加 -->
</div>

Swiperの初期化

Swiperを初期化して、スライダーの動作を有効にします。

<script>
 let swiper = new Swiper('.swiper-container', {
  slidesPerView: 1, // 1回に表示するスライドの数
  spaceBetween: 20, // スライド間のスペース
  loop: true, // ループ再生
  pagination: {
   el: '.swiper-pagination', // ページネーションのクラス
   clickable: true, // クリック可能にする
  },
  navigation: {
   nextEl: '.swiper-button-next', // 次へボタンのクラス
   prevEl: '.swiper-button-prev', // 前へボタンのクラス
  },
 });
</script>

カスタマイズ方法

Swiper.jsは多くのカスタマイズオプションを提供しています。以下は、一部のカスタマイズ例です。

自動再生の追加

autoplay: {
 delay: 5000, // 自動再生の遅延時間（ミリ秒）
 disableOnInteraction: false, // ユーザーの操作で自動再生を停止しない
}

レスポンシブ対応

breakpoints: {
 768: {
  slidesPerView: 2,
  spaceBetween: 30,
 },
 1024: {
  slidesPerView: 3,
  spaceBetween: 40,
 },
}

フェード効果の追加

effect: 'fade',
fadeEffect: {
    crossFade: true, // クロスフェードを有効にする
}

まとめ

Swiper.jsを使用すると、簡単にモバイル対応のスライダーを実装できます。必要に応じて様々なカスタマイズを追加し、魅力的でユーザーフレンドリーなブログ記事のスライダーを作成しましょう。

\ シェアしてね！ /

関連記事