学習記録

アウトプット用に作りました

Swiperを使ってスライダー機能を実装する

Swiperとは

画像をスライダー形式に表示する機能を実装するものです。公式サイトを見るとたくさんのスライダーのデザインの見本コードをあり、参考にすることで簡単に実装することができます。
参考 : Swiper Demos


Swiperを導入

まず最初にCSSとJSでSwiperを適用するための設定を行う必要があります。この設定を行うための方法として以下の3つがあります。

①Swiperの公式サイトのライブラリを使用する
②ファイルをダウンロードせずに使用する(CDN)
③npm、yarnのJSのパッケージマネージャを使用する

Swiper.jsの公式サイトではCDNとnpmを使用した実装の説明がされています。私はnpmで試したのですがnode_modules配下にswiperのファイルがなぜか作成されなかったので、yarnというJSのパッケージマネージャを使って実装していきました。


yarnを使ってSwiperを導入

homebrewにyarnをダウンロードしていなかったので、まず最初にyarnのダウンロードを行いました。

$ brew install yarn

次にyarnにswiperを導入して、インストールを行います。
(Gemfileに追加してbundle installしているのと同じイメージです)

$ yarn add swiper
$ yarn install 

これで必要なファイルがnode_modulesディレクトリ配下に作成されました。

次にapplication.css.scssとapplication.jsのマニフェストファイルにnode_modulesの読み込みたいswiperのファイルの名前を書きます。
ディレクトリのnode_modulesの部分は省略できるので、swiper/からファイルの名前を記入することができます。

assets/stylesheets/application.css.scss

@import 'swiper/swiper-bundle';
assets/stylesheets/application.js

//= require swiper/swiper-bundle.js

導入したnode_modules配下のファイルを読み込むようにするための設定をconfig/initializers/assets.rbに追記します。

Rails.application.config.assets.paths << Rails.root.join('node_modules')


Swiperを実装する

HTML、CSS、JSを使いたいスライダーのデモを真似して書いていきます。私は自動で画像が切り替わる設定をしたかったのでAutoPlayを適応しました。

HTML

HTMLファイルの構造は基本的に下記のように書きます。クラス名を変更したり、省略するとCSSやJSの設定ができなくなるので注意します。

<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>
  <!-- ページネーション(省略可) -->
  <div class="swiper-pagination"></div>

  <!-- ナビゲーションボタン(省略可) -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- スクロールバー(省略可) -->
  <div class="swiper-scrollbar"></div>
</div>

CSS

公式の書き方を参考にしつつ、適宜Swiperのデザインを調整していきます。

assets/stylesheets/application.css.scss

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

.swiper-slide {
      text-align: center;
      font-size: 18px;
}

JS

assets/stylesheets/ディレクトリの配下に新しくJSファイルを自分で作成します。

$ touch assets/stylesheets/hoge.js

この作成したファイルに公式を参考にして書いていきます。

var swiper = new Swiper(".swiper-container", {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false,
        },
});

そしてこのJSを読み込みたいHTMLファイルに読み込む旨の表記を行います。スライダーを導入しているHTMLファイルです。

<%= javascript_include_tag "hoge.js"  %>

参考 : Railsで特定のページのみJavaScriptを読み込む方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン

しかしこれだけではSwiperは機能しませんでした。JSの読み込む場所に問題があったようです。「自作JSの読み込みはbodyの最後に書いたほうがよくて、外部ライブラリはheadに書く方がいいという決まり事がある」ということなので少しコードを変えてみました。
もともとbodyに書いていたJSのjavascript_include_tagの記述を全部headタグに移すことでswiperを起動させることができました。
また自作のJSファイルであるhoge.jsの読み込みをスライダーを導入しているHTMLファイルに直接書いていましたが、application.html.erbファイルのbodyタグ内に記載しても動作に問題はありませんでした。
参考 : 自作JSの読み込みはbodyの最後に書いたほうがいいのに、なんで外部ライブラリはheadにあるんでしょうか? - Qiita

参考

Swiper - The Most Modern Mobile Touch Slider

RailsでSwiperを導入する方法(Swiperは2020年7月にバージョンアップし、従来と設定方法が変わりました!) - Qiita

swiperをyarnで導入して、画像をスライダー形式にする! - Qiita