JQueryでスライドショー

sprict.js

const opt = {
  loop: true, 
   autoplay: {
    delay: 5000,
  },
}

optという定数を定義し、オブジェクトを代入しています。
このオブジェクトはSwiperの設定を含んでいます。
loop: trueは、スライドショーがループ再生されることを意味します。
最後のスライドの次は最初のスライドに戻ります。
autoplay: { delay: 5000 }は、スライドショーが自動的に再生されることを意味します。
delay: 5000は、各スライドが5000ミリ秒（5秒）表示されてから次のスライドに移動することを示しています。

script.js

// Swiperを実行
$(document).on('turbolinks:load', function() {
    let swiper = new Swiper('.swiper',opt);
});

$(document).on('turbolinks:load', ...)は、
Turbolinksを使用している場合に、ページの読み込みが完了したときにコードを実行するためのイベントリスナーです。
Turbolinksを使用していない場合は、$(document).ready(...)を使用することができます。
function() { ... }は、ページの読み込みが完了したときに実行される無名関数です。
let swiper = new Swiper('.swiper', opt);は、Swiperライブラリを使用して新しいスライドショーを初期化しています。
'.swiper'は、スライドショーを適用する要素のセレクターです。クラス名がswiperの要素を指定しています。
optは、先に定義したSwiperの設定オブジェクトです。この設定がスライドショーに適用されます。

HTML

<div class="swiper">
      <div class="swiper-slide">
         <%= image_tag 'nature.jpg', class: 'swiper__img' %>
      </div>
      <div class="swiper-slide">
         <%= image_tag 'nature1.jpg', class: 'swiper__img' %>
      </div>
      <div class="swiper-slide">
         <%= image_tag 'nature2.jpg', class: 'swiper__img' %>
      </div>
      <div class="swiper-slide">
         <%= image_tag 'nature3.jpg', class: 'swiper__img' %>
      </div>
    </div>
  </div>

imageには好きな画像を入れてください。
多分動くはずだと思います！