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