Swiperで画像をスライド表示する
ブログトップの背景画像だったり、おすすめリンクとかをスライド表示させるのに便利なのがSwiper
公式サンプル：
swiperjs.com
今回はこれで、登録した画像を自動でスライドさせるものを実装する。
導入
npm等でパッケージをインストールする
$ npm install swiper
これでプロジェクトのnode_modulesに必要なファイルがインストールされる
こいつをアセットパイプラインで読み込んでやる
app/assets/javascripts/application.js
//= require swiper/swiper-bundle.js //= require my_swiper.js
後述のSwiperの初期化をJSファイル(my_swiper.js)として切り出す場合はここで読み込む
app/assets/stylesheets/application.css.scss
@import 'swiper/swiper-bundle';
nodeのディレクトリを読み込めるようにパスをパイプラインに追加する
config/initializers/assets.rb
Rails.application.config.assets.paths << Rails.root.join('node_modules')
実装
公式のサンプルを見ていい感じのをコピーする
不要なものは適宜削除すること
HTML
<!-- Slider main container --> <div class="swiper-container"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> ... </div> <!-- If we need pagination --> <div class="swiper-pagination"></div> <!-- If we need navigation buttons --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- If we need scrollbar --> <div class="swiper-scrollbar"></div> </div>
Swiperの初期化
const swiper = new Swiper('.swiper-container', { // Optional parameters direction: 'vertical', loop: true, // If we need pagination pagination: { el: '.swiper-pagination', }, // Navigation arrows navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // And if we need scrollbar scrollbar: { el: '.swiper-scrollbar', }, });
jqueryの場合
$(function() { new Swiper('.swiper-container',{ //Optional parameters direction: 'vertical', //省略 })
JSはhtmlファイル内にscriptタグで記述してもいいし、
別ファイル(ex. app/assets/javascripts/my_swiper.js )に切り出してもいい。
jQueryで書く場合はjQueryの読み込みを先に行うことに注意する。
例：
<head> ... <%= javascript_include_tag 'https://code.jquery.com/jquery-3.2.1.slim.min.js' %> <%= javascript_include_tag 'application' %> ... </head>
基本的な実装はこのような形でできる。
