Swiper.jsを使った魅力的なスライドパターン10選と実装方法

Posted on 2024年11月13日2024年11月13日 by 小清水和真

Webサイトやアプリケーションで、視覚的なインパクトを与えるスライドショーは訪問者の目を引きつけ、
情報をスムーズに伝えるための効果的な手段です。
その中でも、Swiper.js は豊富なカスタマイズオプションを提供し、
さまざまな表現が可能なスライドショーを簡単に実装できる優れたライブラリです。

本記事では、Swiper.jsの基本設定から、フェード、カバーフロー、カードスライドなど、
異なるエフェクトを用いた10種類のスライドパターンとその実装方法を詳しくご紹介します。
各パターンにHTML、CSS、JavaScriptコードを添えているので、
初心者の方でもすぐに試すことができるでしょう。
さまざまなシーンで活用できるパターンをぜひ取り入れて、ウェブサイトをより魅力的にしてみてください。

Swiper.jsの取得方法

Swiper.jsはCDNから直接読み込む方法や、npmなどのパッケージ管理ツールを利用する方法で
簡単に導入することができます。
ここでは、2つの一般的な取得方法をご紹介します。

CDNから読み込む方法

最も簡単にSwiper.jsを導入する方法は、CDNを利用してHTMLに直接読み込む方法です。
CDNを使用することで、追加のインストールなしでSwiper.jsを使い始めることができます。
以下のコードを<head>タグ内に追加してください。

<!-- SwiperのCSS -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"
/>

<!-- SwiperのJavaScript -->
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

この方法では、インターネットに接続されている環境であれば
すぐにSwiper.jsの機能を利用できるようになります。

npmを使用してインストールする方法

開発環境でSwiper.jsを管理し、バージョン管理などを行いたい場合は、
npmを使ってインストールするのが便利です。以下のコマンドを実行して、
Swiperをプロジェクトに追加します。

npm install swiper

インストールが完了したら、JavaScriptファイル内でSwiperをインポートして利用することができます。

// SwiperのCSSをインポート
import 'swiper/swiper-bundle.min.css';

// SwiperのJSをインポート
import Swiper from 'swiper';

これで、プロジェクト内でSwiperを自由に使用できるようになります。
npmを利用すると、プロジェクトの一部としてSwiperを含めることができ、バージョン管理も簡単です。

使用例

基本的なスライド

1. 基本的なスライド

HTML

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">スライド 1</div>
    <div class="swiper-slide">スライド 2</div>
    <div class="swiper-slide">スライド 3</div>
  </div>
  <!-- ページネーション -->
  <div class="swiper-pagination"></div>
  <!-- ナビゲーションボタン -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

CSS

.swiper-container {
  width: 100%;
  height: 300px;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #eee;

  /* スライドの内容を中央に配置 */
  display: flex;
  justify-content: center;
  align-items: center;
}

JavaScript

const swiper = new Swiper('.swiper-container', {
  loop: true,
  autoplay: {
    delay: 3000,
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

フェードエフェクト

HTML

（基本的なスライドと同じ）

CSS

（基本的なスライドと同じ）

JavaScript

const swiper = new Swiper('.swiper-container', {
  effect: 'fade',
  loop: true,
  autoplay: {
    delay: 3000,
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

カバーフローエフェクト

HTML

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">スライド 1</div>
    <div class="swiper-slide">スライド 2</div>
    <div class="swiper-slide">スライド 3</div>
    <div class="swiper-slide">スライド 4</div>
    <div class="swiper-slide">スライド 5</div>
  </div>
  <!-- ページネーション（必要に応じて） -->
  <div class="swiper-pagination"></div>
</div>

CSS

.swiper-container {
  width: 100%;
  height: 400px;
}

.swiper-slide {
  background: #fff;
  /* スライドのデザインに合わせて調整 */
}

JavaScript

const swiper = new Swiper('.swiper-container', {
  effect: 'coverflow',
  loop: true,
  centeredSlides: true,
  slidesPerView: 'auto',
  coverflowEffect: {
    rotate: 50,
    stretch: 0,
    depth: 100,
    modifier: 1,
    slideShadows: true,
  },
});

キューブエフェクト

HTML

（基本的なスライドと同じ）

CSS

（基本的なスライドと同じ）

JavaScript

const swiper = new Swiper('.swiper-container', {
  effect: 'cube',
  loop: true,
  cubeEffect: {
    shadow: true,
    slideShadows: true,
    shadowOffset: 20,
    shadowScale: 0.94,
  },
});

フリーモード

HTML

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">スライド 1</div>
    <div class="swiper-slide">スライド 2</div>
    <div class="swiper-slide">スライド 3</div>
    <div class="swiper-slide">スライド 4</div>
    <div class="swiper-slide">スライド 5</div>
  </div>
  <!-- スクロールバー -->
  <div class="swiper-scrollbar"></div>
</div>

CSS

.swiper-container {
  width: 100%;
  height: 200px;
}

.swiper-slide {
  width: 250px; /* スライドの幅を指定 */
  background: #fff;
}

JavaScript

const swiper = new Swiper('.swiper-container', {
  freeMode: true,
  slidesPerView: 3,
  spaceBetween: 10,
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true,
  },
});

パララックスエフェクト

HTML

<div class="swiper-container">
  <div class="parallax-bg" data-swiper-parallax="-23%"></div>
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="title" data-swiper-parallax="-300">スライド 1</div>
      <div class="subtitle" data-swiper-parallax="-200">サブタイトル 1</div>
      <div class="text" data-swiper-parallax="-100">
        <p>スライド 1 の内容</p>
      </div>
    </div>
    <!-- 他のスライドも同様に -->
  </div>
  <!-- ページネーション -->
  <div class="swiper-pagination"></div>
</div>

CSS

.swiper-container {
  width: 100%;
  height: 100vh;
}

.parallax-bg {
  background-image: url('背景画像のURL');
  position: absolute;
  top: 0;
  left: 0;
  width: 130%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.swiper-slide {
  color: #fff;
  /* スライドのスタイルを調整 */
}

.title {
  font-size: 41px;
  font-weight: 300;
}

.subtitle {
  font-size: 21px;
}

.text {
  font-size: 14px;
  max-width: 400px;
  line-height: 1.3;
}

JavaScript

const swiper = new Swiper('.swiper-container', {
  loop: true,
  speed: 600,
  parallax: true,
  autoplay: {
    delay: 3000,
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

スクロールバー付きスライド

HTML

（基本的なスライドと同じ）

CSS

（基本的なスライドと同じ）

JavaScript

const swiper = new Swiper('.swiper-container', {
  loop: true,
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true,
  },
});

サムネイルナビゲーション

HTML

<!-- メインのスライダー -->
<div class="swiper-container gallery-top">
  <div class="swiper-wrapper">
    <div class="swiper-slide">メインスライド 1</div>
    <div class="swiper-slide">メインスライド 2</div>
    <div class="swiper-slide">メインスライド 3</div>
  </div>
</div>

<!-- サムネイルのスライダー -->
<div class="swiper-container gallery-thumbs">
  <div class="swiper-wrapper">
    <div class="swiper-slide">サムネイル 1</div>
    <div class="swiper-slide">サムネイル 2</div>
    <div class="swiper-slide">サムネイル 3</div>
  </div>
</div>

CSS

.gallery-top {
  width: 100%;
  height: 80%;
}

.gallery-thumbs {
  width: 100%;
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}

.gallery-thumbs .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}

.gallery-thumbs .swiper-slide-thumb-active {
  opacity: 1;
}

JavaScript

const swiperThumbs = new Swiper('.gallery-thumbs', {
  spaceBetween: 10,
  slidesPerView: 4,
  freeMode: true,
  watchSlidesProgress: true,
});

const swiperTop = new Swiper('.gallery-top', {
  loop: true,
  spaceBetween: 10,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  thumbs: {
    swiper: swiperThumbs,
  },
});

マウスホイール制御

HTML

（基本的なスライドと同じ）

CSS

（基本的なスライドと同じ）

JavaScript

const swiper = new Swiper('.swiper-container', {
  loop: true,
  direction: 'vertical', // 縦方向のスライド
  mousewheel: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

カードスライド

HTML

（基本的なスライドと同じ）

CSS

（基本的なスライドと同じ）

JavaScript

const swiper = new Swiper('.swiper-container', {
  effect: 'cards',
  grabCursor: true,
  loop: true,
});

まとめ

Swiper.jsは、視覚的な魅力を持つスライドショーを簡単に実装できる強力なライブラリです。
フェードエフェクトやカバーフロー、カードスライドといった多彩なスライドパターンを使うことで、
ウェブサイトに動的な演出を加えることができます。
本記事でご紹介した設定例とコードを参考に、
目的やデザインに合わせたスライドパターンをぜひ実装してみてください。

Swiper.jsの導入も、CDNから読み込む方法やnpmでのインストール方法を使えば手軽に開始できます。
プロジェクトの規模や管理方法に応じて、最適な導入方法を選びましょう。
スライドショーの活用で、訪問者の目を引くデザインと快適なユーザー体験を実現できるはずです。

月	火	水	木	金	土	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

Swiper.jsを使った魅力的なスライドパターン10選と実装方法

Swiper.jsの取得方法

CDNから読み込む方法

npmを使用してインストールする方法

使用例

基本的なスライド

1. 基本的なスライド

フェードエフェクト

カバーフローエフェクト

キューブエフェクト

フリーモード

パララックスエフェクト

スクロールバー付きスライド

サムネイルナビゲーション

マウスホイール制御

カードスライド

まとめ

いいね:

JavaScriptの基本！Objectと主要メソッドの詳細解説

JavaScriptを勉強する上で覚えておきたいオブジェクト一覧と詳細

フォームの入力バリデーション：空白や全角スペースの無効化方法

コメントを残すコメントをキャンセル

カテゴリー

関連記事

Swiper.jsの取得方法

CDNから読み込む方法

npmを使用してインストールする方法

使用例

基本的なスライド

1. 基本的なスライド

フェードエフェクト

カバーフローエフェクト

キューブエフェクト

フリーモード

パララックスエフェクト

スクロールバー付きスライド

サムネイルナビゲーション

マウスホイール制御

カードスライド

まとめ

共有:

いいね:

JavaScriptの基本！Objectと主要メソッドの詳細解説

JavaScriptを勉強する上で覚えておきたいオブジェクト一覧と詳細

フォームの入力バリデーション：空白や全角スペースの無効化方法

コメントを残すコメントをキャンセル

カテゴリー

人気の記事

関連記事