Zenn
📖

【Rails】swiperを使ったスライドショー機能

2023/11/13に公開
Rails
#
初学者
#
swiper
#
dmmwebcamp
tech

PF製作フェーズにてTopページを彩るのに少し憧れていたスライドショー機能。カリキュラムだけではいまいちだったので、ここで復習したいと思います。

前提

  • 今回使用するのはjQuery不要のJavaScriptのプラグインになります。
  • CDNによる導入
CDNとは

コンテンツデリバリーネットワーク の略称で、世界中に分散されたサーバーのネットワークで、より迅速かつ効率的にコンテンツをユーザーに配信するためのもの。コンテンツをユーザーに最も近いサーバーからキャッシュして配信することにより、コンテンツの配信距離を短縮し、読み込み時間を短縮し、レイテンシを低下させるとのこと。長時間の読み込み時間が必要な大きなファイルを持つWebサイトにとって特に有用です。

手順

CDNでファイルを読み込む

index.htmlファイルにSwiperをCDNで導入するためのコードを２つ入力。
※下記の+がついているものが追加になります。

views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
:
   + <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>
 </head>
:

一部スタイルシートを記述するため、style.cssも読み込みます。

スライドショーを使用するHTMLファイルに記述する

views/public/homes/top.html.erb
:
<div class="container">
  <div class="swiper">
    <div class="swiper-wrapper">
      
      <div class="swiper-slide">
        <%= image_tag asset_path('jin3.jpg'), alt: '' %>
      </div>
      
      <div class="swiper-slide">
        <%= image_tag asset_path('mo2.jpg'), alt: '' %>
      </div>
      
      <div class="swiper-slide">
        <%= image_tag asset_path('hiboll.jpg'), alt: '' %>
      </div>
      
    </div>
    <!-- ページネーション -->
    <div class="swiper-pagination"></div>
    <!-- 前後の矢印 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
  
  <script>
    const swiper = new Swiper(".swiper", {
    loop: true, // ループ
    speed: 3000, // 少しゆっくり(デフォルトは300)
    autoplay: { // 自動再生
      delay: 1000, // 1秒後に次のスライド
      disableOnInteraction: false, // 矢印をクリックしても自動再生を止めない
    },
    // ページネーション
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    // 前後の矢印
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });
  </script>
</div>
:

Swiperで実装する際に必須であるCSSのclassは下記になります。

  • <div class="swiper">
    swiper（スライドショー箇所全体を内包する要素）
  • <div class="swiper-wrapper">
    swiper-wrapper（スライド部を内包する要素）
  • <div class="swiper-slide">
    swiper-slide（各スライドを入れる要素）

Swiperを動作させる記述

Swiperを動作させるのに必要な記述は上記HTMLファイルの<script></script>の中に記述し動作を指定させます。

CSSを記述させる

画像の大きさ等はCSSで調整が必要になります。

app/javascript/styleseets/application.scss
.swiper-slide img {
  width: 100%;
}

ここまでがRailsでswiperを使用してスライドショー機能を実装する流れになります。
正直、まだまだHTMLの記述内容や動作の指定については理解ができていませんが以下のサイトが機能ごとに参考コードも載せてくれていたのでまずはこちらをみて取り掛かることをおすすめします。
https://junpei-sugiyama.com/swiper-summary/

完成


写真では動きが無くてわかりづらいですが、3枚の写真が一枚ずつ横に流れているような形になります。先ほどサンプルサイトでいうと一番最初の例になります。

まとめ

スライドショー機能のような動きのあるサイトだとjavascript未経験の自分にはハードルが高いとビビっていましたが、swiperをCDNによる導入にすることで初学者でもだいぶ扱いやすい内容だと思いました。そして動きがあるだけでシンプルなページも少し迫力がでて満足感とモチベも上がるのでお勧めです！

Discussion