つぶやき
-ブログ-

Swiper.jsでスライドショーを制作する方法

2022年10月18日

WEBサイトを制作している際に画像を横並びにしたいケースがあります。ただ幅には限度があるため多くの画像を並べられません。そこで活用したいのがスライドショーです。スライドショーならば、限度がある幅に対しても多くの画像をスライドして見せられます。そこで今回は、スライドショーを制作する際に便利な「Swiper.js」の使い方を紹介します。

CDNで読み込む、もしくはファイルを読み込む

SwiperはCDNで読み込んで使うか、ファイルを読み込んで使うかの2つの方法があります。
今回はCDNで読み込んでスライドショーを作る方法を解説していきます。

↓SwiperのCDNは次のリンクに載っています。
https://swiperjs.com/get-started

CDNには下記のようにCSSとjsの2つがあるので両方を設置しましょう。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
<script　src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

ベースになるHTMLやjavascriptを記述する

下記がswiperのベースになるHTMLの記述です。

▢HTMLファイル

<section class="swiper_box">
    <h1 class="production_achieve">スライドショー</h1>
    <div class="swiper">
        <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 class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
        </div>
    </div>
</section>

下記がswiperのベースになるjavascriptの記述です。

▢jsファイル

const swiper = new Swiper(".swiper", {
});

上記のHTMLとjavascriptの記述だけで下記のように最低限のスライドショーが作成できます。スライド部分のCSSは自身の好きなように調整してみてください。

See the Pen
Untitled by wataru🐧 (@mimori_5046)
on CodePen.

左クリックをしながら、左にマウスを動かすと画像がスライドして、次の画像が表示されます。

スライドボタンやページネーションなどのオプションを設定する

最低限のスライドショーの作成をしたら、次はスライドボタンやページネーションの設置、スライドの速さの設定などのオプションを付け加えて、自分好みのスライドショーを作成していきましょう。ここからはSwiperでよく使うオプションを紹介します。

スライドボタンの設置

スライドボタンを設置すれば、ボタンをクリック・タップすることにより、スライドを動かせます。スライドボタンを設置するには、HTMLとjsファイルに以下の記述を行います。

▢HTMLファイル

<div class="swiper">
        <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 class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
        </div>

<!-- スライドボタンの設置-->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>

▢jsファイル

const swiper = new Swiper(".swiper", {
<!-- スライドボタンの設置-->
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
    },
});

上記の記述をするとスライドボタンは下記のように設置できます。

See the Pen
Untitled by wataru🐧 (@mimori_5046)
on CodePen.

ページネーションを設置する

ページネーションがあれば、現在自分が何枚目のスライドを表示しているのかが、一目で分かります。ページネーションを設置するには、HTMLとjsファイルに以下の記述を行います。

▢HTMLファイル

<section class="swiper_box">
    <h1 class="production_achieve">スライドショー</h1>
    <div class="swiper">
        <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 class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
　　　　　<!-- ページネーションの設置-->
        <div class="swiper-pagination"></div>
    </div>
</section>

▢jsファイル

const swiper = new Swiper(".swiper", {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
    },
　<!-- ページネーションの設置-->
   pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true
    },
});

上記の記述をすると、ページネーションは下記のように設置できます。

See the Pen
ページネーション by wataru🐧 (@mimori_5046)
on CodePen.

スライドのスピードを設定する

スライドのスピードの設定は簡単です。下記のようにjsファイルに「 speed: 数値,」と記述すればスピードの設定ができます。

▢jsファイル

const swiper = new Swiper(".swiper", {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
    },
   pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true
    },
　<!-- スライドのスピードの設定-->
  speed: 100,
});

上記の記述をすると下記のようにスライドのスピードを変えられます。

See the Pen
スピード by wataru🐧 (@mimori_5046)
on CodePen.

ループに対応させる

これまで制作してきたスライドショーは、まだループに対応していません。ループに対応させれば、最後のスライド画面から最初のスライド画面に、最初のスライド画面から最後のスライド画面に移動できます。

下記のように「loop: true,」とjsファイルに記載するとループに対応させられます。

▢jsファイル

const swiper = new Swiper(".swiper", {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
    },
   pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true
    },
  speed: 100,
　<!-- ループに対応させる-->
  loop: true,
});

上記の記述をすると、下記のようにスライドにループを設定できます。

See the Pen
ループ by wataru🐧 (@mimori_5046)
on CodePen.

スライドを自動で動くようにする

これまではボタンを押さないとスライドが動かない仕様でしたが、自動で動かせるような設定も可能です。下記のように「autoplay」とjsファイルに記載すると自動で動くようになります。

▢jsファイル

const swiper = new Swiper(".swiper", {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
    },
   pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true
    },
<!-- スライダーを自動で動かす-->
   autoplay: {
        delay: 2000,
    },
  speed: 100,
  loop: true,
});

上記の記述をすると下記のようにスライダーが自動で動くようになります。また 「delay: (数値),」でスライドの速さを設定できます。

See the Pen
スライド　自動 by wataru🐧 (@mimori_5046)
on CodePen.

表示させるスライドの枚数とスライドの間隔の設定

これまでは表示されるスライドの枚数は一枚のみでした。表示される枚数も設定可能です。またスライドの間隔の設定についても紹介します。下記のようにjsファイルに「slidesPerView」「spaceBetween」で表示されるスライドの枚数と間隔の設定が可能です。

▢jsファイル

const swiper = new Swiper(".swiper", {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
    },
   pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true
    },
   autoplay: {
        delay: 2000,
    },
  speed: 100,
  loop: true,
<!-- 表示するスライドの枚数-->
  slidesPerView: 3,
<!-- スライドの間隔の幅-->
  spaceBetween: 20,
});

上記の記述をすると、下記のように表示されるスライドの枚数と間隔を設定できます。今回は一画面に3枚、間隔の幅は20pxで設定しました。

See the Pen
スライド枚数 間隔 by wataru🐧 (@mimori_5046)
on CodePen.

真ん中にスライドを配置しつつ、左右に前後のスライドがちらっと見れるようにする

左右にちらっと前後のスライドを表示させるようにすると、閲覧者の興味を引かせられるでしょう。下記のようにjsファイルに「slidesPerView」を小数点で設定しつつ、「 centeredSlides: true,」と記述すれば実装できます。

▢jsファイル

const swiper = new Swiper(".swiper", {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
    },
   pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true
    },
   autoplay: {
        delay: 2000,
    },
  speed: 100,
  loop: true,
<!-- 小数点で表示領域を設定する-->
  slidesPerView: 1.5,
  spaceBetween: 20,
<!-- 中央に配置する-->
  centeredSlides: true,
});

上記の記述をすると、下記のように真ん中にスライドを配置しつつ、前後のスライドがちらっと見えるようになります。

See the Pen
センタリング by wataru🐧 (@mimori_5046)
on CodePen.

レスポンシブにも対応。幅によって表示する枚数を変更する

パソコンでの表示なら3枚、タブレット表示なら2枚というように幅によって枚数を変更できます。下記のようにjsファイルに「breakpoints」を記載すると、幅ごとのブレイクポイントが設定できます。

▢jsファイル

const swiper = new Swiper(".swiper", {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
    },
   pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true
    },
   autoplay: {
        delay: 2000,
    },
  speed: 100,
  loop: true,
  slidesPerView: 1,
  centeredSlides: true,

<!-- 幅ごとのブレイクポイントを設定する-->
    breakpoints: {
        600: {
            slidesPerView: 2,
            spaceBetween: 20,
        },
        1120: {
            slidesPerView: 3,
            spaceBetween: 30,
        },
    },
});

ということでこれまでSwiperでのスライドショーの作成方法を解説してきました。ここで紹介した以外にも、様々なオプションがあるので、自分好みのスライドショーを作成してみてください。

GIV株式会社は、埼玉県川越市にあるWEB（ホームページ）制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。


前の記事へ
次の記事へ
一覧へ戻る
最新記事
【WordPress】最初の記事に前の記事へのリンク、最後の記事に次の記事へのリンクを非表示にする方法
javascriptでモーダルウィンドウを作成する方法
【WordPress】次の記事、前の記事を設置する際にリンクだけ取得する方法
WordPressの投稿記事のタイトルや抜粋の文字数を制限する方法を解説
javascriptでフィルタリングを作成する方法
制作に関する
ご相談はこちら