swiperの使い方にについて

どうもどハマりエンジニアです。

 

本日はswiperを導入し、トップページに一定間隔で複数の画像の切替を行っていきたいと思います。

 

 Swiper.jsとは何？

　Swiper.jsとはスライダーが作れるJavaScriptのライブラリです。

CSSとJSを適用することで、画像などをスライドできる機能を実装するものです。

PCでもスマホでも使えて、レスポンシブ対応していることや、jQueryに依存しません。

 

Swiperを使うための準備

CSS及びJSの適用方法には３種類あります。

  • CDN（クラウド上に公開されているCSSとJSを適用させる）
  • ファイルをダウンロードして、愚直にCSSとJSを適用させる
  • NPMというJSのパッケージマネージャ（RubyでいうところのGemを管理するBundlerのようなもの）
    • Yarnという類似のパッケージマネージャーを使うことも可能です

今回はCDNを使いクラウド上に公開されているCSSとJSを使い実装をしていきたいと思います。(一番楽に実装できるとのこと)

 

HTMLのheadタグにcss、bodyタグにjsを以下のコードを貼り付けるだけです。(最バージョンが更新されていれば、最新のバージョンのコードにする必要がある)

 

application.html.slim

head
5.4.5/css/swiper.css'
 
body
Swiper/5.4.5/js/swiper.min.js'
 

 

最新のswiperのバージョンは下記のサイトを参照してください！

cdnjs.com

 

viewsの実装

スライドを実装したいhtmlにswiperでもともとあるクラスを書いていく。

すでにswiper-containerなどのクラスは準備されているので、同じように書いていけばいいです。

app/views/layouts/_header.html.slim

header.swiper-container
　　.swiper-wrapper
　　　　- if current_site.main_images.present?
　　　　- current_site.main_images.each do |main_image|
　　　　 = image_tag main_image, class: 'swiper-slide'
　　 - else
　　　　 = image_tag '/images/cover.jpg', class: 'swiper-slide'
　　 .swiper-pagination
　　 .swiper-button-prev
　　.swiper-button-next
　　.swiper-scrollbar

 

 

JSの実装

Qiitaなどをみていると、var mySwiper = new Swiper('.swiper-container', {

のように実装しているものが多かったが、下記のようにかかないとjsが反映されないので注意が必要である。

 

app/assets/javascripts/application.js

$(function() {
　　new Swiper('.swiper-container', {
　　　　autoplay: {
　　　　　　delay: 3000,
　　　　　　stopOnLastSlide: false,
　　　　　　disableOnInteraction: false,
　　　　　　reverseDirection: false
　　},
　　　　navigation: {
　　　　　　nextEl: '.swiper-button-next',
　　　　　　prevEl: '.swiper-button-prev'
　　　　},
　　　　pagination: {
　　　　　　el: '.swiper-pagination',
　　　　　　type: 'bullets',
　　　　　　clickable: true　　
　　　　}
　　})
});

 

上記の実装だと、ページが３秒の一定間隔で切り替わるようになります。

その他にもページネーションなどの実装を行っています。

 

以上で簡単にスライドを実装することができます！