jQueryのプラグインのこと

yarn add swiper でyarn経由でインストール

node_modulesにファイルができる

ダウンロードしたらversionを確認しておくこと(バージョンによって結構書き方が違ったりする)

※yarn add swiperを打ったら出てくるdownloadしている表示のどこかにあります。

view側

header
  .swiper #<=バージョン6ではswiper-containerだった、ブログによってはvの違いがあるので気を付ける
    .swiper-wrapper
      - @current_site.main_images.each do |main_image|
        .swiper-slide
          = image_tag main_image

application.css.scss

@import 'swiper/swiper-bundle';

application.js

//= require swiper/swiper-bundle.js #<=オプション機能を全て使えるようにしている
//= require swiper.js

assets.rb

Rails.application.config.assets.paths << Rails.root.join('node_modules')

swiper.js(名前は任意で新規作成※application.jsのrequireの記述ファイルと名前を合わせること)

$(document).ready(function() {
     const swiper = new Swiper('.swiper', {
        // Optional parameters
         loop: true,
         autoplay: {
             delay: 3000,
         },
       
      
})
});