はじめに
バージョン確認の重要性
Swiper.jsはバージョンによってサポートしてくれるブラウザが違う。ver5.0以降から、IEは完全にサポート対象外になった。今回私はchromeで開発を行っているので最新版でいけると思いきや、挙動が意図したものにならなかったので、4.5.0系を使うことにした。
便利なオプションたち
オプションが豊富で有名なSwiper.js
ここでは、私が参考にした記事を載せておくだけに留めておく。
参考記事
実例12パターン】画像スライダーはSwiper使っておけば間違いない!実用的な使い方を紹介
https://haniwaman.com/swiper/
swiper.js使ってみたからそのオプションについて(v4.1.6)
https://reiwinn-web.net/2018/03/15/swiper-4-1-6/
実際のコード
$(function(){
var mySwiper = new Swiper('.swiper-container', {
slidesPerView: 3,
slideToClickedSlide: true,
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
breakpoints: {
767: {
slidesPerView: 1,
spaceBetween: 0
}
}
});
});
.swiper-container.p-2.rounded
.swiper-wrapper.p-1
- @posts.each do |post|
.events__content.col-sm-6.col-md-4.mb-3
.swiper-slide
.card{id: post.id}
%label.m-1
- if post.image.present?
%img.card-img-top.img-fluid.rounded{src: "#{post.image}"}
- else
%img.card-img-top.img-fluid.rounded{src: "/assets/noimage.png"}
.card-body.event
%h5= link_to "#{post.title}", post_path(post.id), class: "event-title stretched-link text-decoration-none"
.event__name
#{post.user.name} さん
.text-right
= l post.created_at, format: :long
.swiper-button-prev
.swiper-button-next
.swiper-pagination
これでprevボタンnextボタンを押しても、スライドされない。consoleをみてもエラーはない。ドラッグしながらスクロールすると、一応.swiper-containerに要素が入っていることはわかる。jsファイルは読み込まれているが、メソッドが実行されていない。
階層構造は崩すな
原因がわかった。先ほどのコードは、.swiper-wrapperと.swiper-slidesの間に、.events__content......というクラスが入っている。これが原因だった。Swiper.jsのswiper-container, wrapper, slidesのクラスたちは必ず親子孫の関係でなくてはならなかった。
修正後のコード
.swiper-container.p-2.rounded
.swiper-wrapper.p-1
- @posts.each do |post|
.swiper-slide.events__content.col-sm-6.col-md-4.mb-3
.card{id: post.id}
%label.m-1
- if post.image.present?
%img.card-img-top.img-fluid.rounded{src: "#{post.image}"}
- else
%img.card-img-top.img-fluid.rounded{src: "/assets/noimage.png"}
.card-body.event
%h5= link_to "#{post.title}", post_path(post.id), class: "event-title stretched-link text-decoration-none"
.event__name
#{post.user.name} さん
.text-right
= l post.created_at, format: :long
.card.col-auto
.text-left
- post.genre_list.each do |genre|
.badge.badge-primary{data:{role: "tagsinput"}}
= link_to "#{genre}", tag_path(genre), class: 'text-decoration-none text-white'
- if user_signed_in?
.offset-8.col-auto.card
.text-center.likes
= render partial: '/posts/posts', locals: {post: post}
- if @posts.count >= 4
.swiper-button-prev
.swiper-button-next
.swiper-pagination
これで正常に動くようになった。
終わりに
私のように、こんなことで何時間も無駄にしないように、皆さんも気をつけてください。
参考記事
【Rails5】「Swiper」を使ってスライダー、カルーセルを作る方法
https://qiita.com/emincoring/items/18d07d0aec5d9836227c
[Rails]Swiperで画像スライド作成
https://qiita.com/yummy888/items/8528c7542f85ae7bbc55
サンプル付き!簡単にスライドを作れるライブラリSwiper.js超解説(各種ナビゲーションカスタマイズ編)
https://garigaricode.com/swiper_navigation/