オリジナルアプリの実装で使った機能の一つで自分自身の備忘録の為に投稿しておきます！
初心者のため、間違えている所もあると思います...
画像をスライドショーで切り替える方法はネットで検索するといくつか方法がでてきます。
「slick」や「swiper」など。
僕は上記のやり方だとうまく実装できませんでした。
問題は私の方にある。笑
今回は便利そうなプラグインやGemを使わないでシンプルにJavaScriptだけでスライドショーを実装させました。
実際のコード
コードは以下の通り<img id="mypic data-src="images/image1.jpg" width="400" height="300" class="lazyload">
まずはビューファイルのhtml側にimgタグで画像を表示させます。
サイズやcssで修飾させたい方はそれぞれ指定してあげてください。
この時に一つ注意点ですが画像の格納場所によってパスが違います。
私はapp/public/images/に格納させたのでimages/image.jpgとしていますが、
もしapp/assets/images/に画像を格納すると変わってきます。しかし、ここだと画像ファイルがアセットパイプラインの対象となり画像のURLが変わってくるので扱いにくいです。
詳しくはこちらを参考にしてみてください！[Railsガイド：アセットパイプライン]:https://railsguides.jp/asset_pipeline.html
const pics_src = ["images/image1.jpg","images/image2.jpg","images/image3.jpg"];
let num = -1;
function slideshow_timer(){
if (num === 2){
num = 0;
}
else {
num ++;
}
document.getElementById("mypic").src = pics_src[num];
}
setInterval(slideshow_timer, 5000);
そしてJavaScriptのファイルです。
配列pics_srcには、スライドさせたい画像を保存します。
そして、画像が入れ替わる処理をslideshow_timerの関数内に条件式で定義します。
今回は３枚の画像をスライドさせるので、変数numが２（３枚目)になったら0(1枚目)に戻す式を書き。
if (num === 2){
num = 0;
}
違う場合は変数numに１を足して次の画像を表示させます。
else {
num ++;
}
そしてgetElementById関数を使用し、先ほど設定したimgタグ内のsrc属性を、次の画像のパス名に変更します。
document.getElementById("mypic").src = pics_src[num];
最後にsetInterval関数を使用します。setInterval関数は、第一引数に呼び出したい関数名、第二引数に実行するタイミング（インターバル）を指定します。今回は5000ミリ秒と指定したので(画像をじっくり見てもらいたいから)、5秒後には次の画像に切り替わるという仕組みです。
setInterval(slideshow_timer, 5000);