📷

【Rails & JavaScript】メイン画像のスライドショー

2023/07/28に公開

JavaScript

Rails

slideshow

tech

スライドショー作成

メイン画像がスライドショーになるように実装する。

JavaScriptの実装準備は以下に記載。

実装編

以下の通り実装していく。

HTML

app/views/public/homes/top.html.erb

<div class="slideshow-container">
  <div class="slide fade">
    <%= image_tag "top/top1.jpg" %>
  </div>
  <div class="slide fade">
    <%= image_tag "top/top2.jpg" %>
  </div>
  <div class="slide fade">
    <%= image_tag "top/top3.jpg" %>
  </div>
  <div class="slide fade">
    <%= image_tag "top/top4.jpg" %>
  </div>
</div>
:
:

解説

<div class="slideshow-container"></div>
スライドショー全体の枠組み。
<div class="slide fade"></div>
slideクラスで各スライドのスタイルを定義できるようにし、fadeクラスはスライドのフェードイン・フェードアウトの動作するためにJavaScriptで使用する。
<%= image_tag "top/top1.jpg" %>
スライドショーにしたい画像をimage_tagで挿入。画像はapp/assets/imagesに格納する。

CSS

app/assets/stylesheets/public/homes.scss

.slideshow-container {
  width: 100%;
  height: 800px;
  overflow: hidden;
  position: relative;
}

.slide {
  width: 100%;
  height: 800px;
　object-fit: contain;
  position: absolute;
}

.slide img {
  width: inherit;
  height: inherit;
  margin: 0;
  padding: 0;
  border: none;
}

.slide.fade:first-child {
  opacity: 1;
}

.backimage .text {
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.backimage .text .guidance {
  font-size: 18px;
  color: #fff;
  background-color: rgba(255, 192, 203, 0.7);
  padding: 20px;
  border-radius: 10px;
}

解説

以下の通り解説する。

.slideshow-container

.slideshow-container {
  width: 100%;
  height: 800px;
  overflow: hidden;
  position: relative;
}

スライドショー全体のコンテナ（.slideshow-container）に適用させる。

overflow: hidden; ：コンテナ外の要素が表示されないようにするために設定。
position: relative; ：要素の位置を他の要素に対して相対的に調整する。
今回はスライドショーをページ内のコンテンツの一部として表示したい（スライドショーがべーじ内で静止して表示し、ページがスクロールすると一緒に動く）ため、スライドショーの親であるコンテナをrelativeにし子の各スライドをabsoluteにしてあげる。
relativeとabsoluteの使い方は以下が参考になった。
https://zero-plus.io/media/css-position-absolute/

.slide

.slide {
  width: 100%;
  height: 800px;
　object-fit: contain;
  position: absolute;
}

各スライド（.slide）に適用させる。

object-fit: contain;：画像がスライド内に収まるように表示されるように設定。
position: absolute;：スライドがコンテナ内で絶対位置になるように設定。

.slide imgセレクタのスタイル：

.slide img {
  width: inherit;
  height: inherit;
  margin: 0;
  padding: 0;
  border: none;
}

各スライド内の画像（.slide img）に適用させる。

width: inherit;とheight: inherit;
画像が親要素（スライド）の幅と高さに合わせて表示されるように設定。
margin: 0;、padding: 0;、border: none;
余白や枠線をなくす。

.slide.fade:first-child：

.slide.fade:first-child {
  opacity: 1;
}

最初のスライド（.slide.fade:first-child）に適用させる。

opacity: 1;
最初のスライドがフェードインで表示されるように設定。後続のスライドにはフェードアウトの効果を適用することでスライドショーとなる。

その他のスタイル：

.backimage .logo {
  /* スタイルの定義 */
}

.backimage .text {
  /* スタイルの定義 */
}

.backimage .text .guidance {
  /* スタイルの定義 */
}

これらのセレクタは、背景イメージ（.backimage）内のロゴ（.logo）やテキスト（.text）およびガイダンス（.guidance）に適用させるため状況に応じて設定する。

JavaScript

app/javacript/script.js

  let slideIndex = 0;
  showSlides();

  function showSlides() {
    // スライドの要素を取得
    const slides = document.querySelectorAll(".slide.fade");
    
    // slideIndexを1増やす（次のスライドに進む）
    slideIndex++;
    
    // スライドの数よりもslideIndexが大きくなった場合、最初のスライドに戻る
    if (slideIndex > slides.length) {
      slideIndex = 1;
    }
    
    // 現在のスライドを表示（opacityを1に設定）
    slides[slideIndex - 1].style.opacity = "1";
    
    // 1つ前のスライドを非表示（opacityを0に設定）
    slides[slideIndex - 2 < 0 ? slides.length - 1 : slideIndex - 2].style.opacity = "0";
    
    // 一定時間（6000ミリ秒＝6秒）後に再度showSlides関数を呼び出す（次のスライドに進むための処理）
    setTimeout(showSlides, 6000); 
  }

解説

let slideIndex = 0;
slideIndexという変数を定義し、初期値を0に設定。slideIndexは現在表示しているスライドのインデックスを表す。
showSlides();
showSlides関数を呼び出す。これにより、スライドショーが自動的に始まる。
function showSlides() { ... }
showSlidesという関数を定義。この関数内にスライドショーの動作を記載する。
const slides = document.querySelectorAll(".slide.fade");
document.querySelectorAll() メソッドを使用して、クラス名が "slide" かつ "fade" の要素を全て取得。これにより、スライドショー内の全てのスライド要素が取得される。
slideIndex++;
slideIndexを1増やす。これにより、次のスライドに進むことができる。
if (slideIndex > slides.length) { slideIndex = 1; }
もしslideIndexがスライドの数を超えた場合、最初のスライドに戻る。これにより、ループ再生になる。
slides[slideIndex - 1].style.opacity = "1";
現在のスライドを表示す。 slides[slideIndex - 1] は現在のスライド要素を表し、style.opacity プロパティに "1" を設定することで、スライドが不透明になり表示される。
slides[slideIndex - 2 < 0 ? slides.length - 1 : slideIndex - 2].style.opacity = "0";
一つ前のスライドを非表示にする。 slides[slideIndex - 2] は一つ前のスライド要素を表し、style.opacity プロパティに "0" を設定することで、スライドが透明になり非表示になる。ただし、slideIndex - 2 が0未満になる場合（最初のスライドの前）、slides.length - 1 を指定して最後のスライドに戻るようにしている。
setTimeout(showSlides, 6000);
一定時間（6000ミリ秒＝6秒）後に再度showSlides関数を呼び出す。これにより、スライドが自動的に切り替わり、スライドショーが繰り返し再生される。

スライドショー作成

実装編

HTML

解説

CSS

解説

JavaScript

解説

Discussion