Swiper
Swiper
Swiperは、画像などを動的にスライドできるjQueryのプラグイン
導入手順は、以下のようになる
$ yarn add swiper
↓
[node_modules]にswiperがインストールされる
swiperの公式にあるように[swiper-bundle.css]と[swiper-bundle.js]を読み込むようにしなければいけない
今回は、swiperを使用するlayoutファイルに[application.js]と[application.css.scss]を使用していると仮定しています
[app/assets/javascripts/application.js] //= require swiper/swiper-bundle.js
[app/assets/stylesheets/application.css.scss] @import 'swiper/swiper-bundle';
上記のassetに記述したファイルのパスを以下に記述することで、絶対パスで記述しなくても読み込める
[config/initializers/assets.rb] Rails.application.config.assets.paths << Rails.root.join('node_modules')
[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 url_for(main_image), class: 'swiper-slide' # スライドさせる対象にswiper-slideというクラスを付ける - else = image_tag '/images/cover.jpg', class: 'swiper-slide' .container.blog-title h1 = link_to current_site.name, root_path p.lead = current_site.subtitle javascript: $(document).ready(function() { new Swiper('.swiper-container', { # ①のクラス名を利用 loop: true, autoplay: { delay: 3000, }, }) })
※ポイント
$(document).ready(function() { # 指定した処理 });
上記の記述は、DOMの読み込みが終わったらfunction()の中の処理を実行するという意味
JavaScriptは、HTMLが全て読み込まれてから出ないと正しく動作しない為、これを記述する
非同期通信(remote: true)で何かをクリックした時とかに[js.erb]ファイルをレスポンスする時は、ブラウザ上で画面が既に表示されているので、DOMの読み込みが終わっているが、今回のようにブラウザに画面が表示されるのと同時にJavaScriptを使う場合とかだと画面上のDOMが読み込まれているか分からないので、
[$(document).ready(function() {
});]
を記述する
参考記事
jQueryの基本 - $(document).ready - Qiita
JavaScriptの$(document).readyの使い方を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
swiperをyarnで導入して、画像をスライダー形式にする! - Qiita
【2021年版 RailsアプリにSwiper.jsでカルーセルを実装】 - Qiita
RailsでSwiperを導入する方法(Swiperは2020年7月にバージョンアップし、従来と設定方法が変わりました!) - Qiita
RailsでSwiperを導入する方法(Swiperは2020年7月にバージョンアップし、従来と設定方法が変わりました!) - Qiita