Swiper

Swiper

Swiperは、画像などを動的にスライドできるjQueryプラグイン

導入手順は、以下のようになる

$ yarn add swiper


[node_modules]にswiperがインストールされる
swiperの公式にあるように[swiper-bundle.css]と[swiper-bundle.js]を読み込むようにしなければいけない

Image from Gyazo

今回は、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マガジン

jQuery入門講座 使い方-jQueryの省略構文

swiperをyarnで導入して、画像をスライダー形式にする! - Qiita

Swiperの導入 - manabuのまなび

【2021年版 RailsアプリにSwiper.jsでカルーセルを実装】 - Qiita

RailsでSwiperを導入する方法(Swiperは2020年7月にバージョンアップし、従来と設定方法が変わりました!) - Qiita

RailsでSwiperを導入する方法(Swiperは2020年7月にバージョンアップし、従来と設定方法が変わりました!) - Qiita