高橋 花子

高橋 花子

1649826300

バニラJavaScriptを使用して画像カルーセルを最初から作成する

カルーセルがWebサイトのデザインに不可欠なコンポーネントであることは間違いありません。スペースに限りがある場合。スペースに限りがあるが、それでも多くの情報を表示したい場合、カルーセルは、関連するコンテンツまたは関連しないコンテンツのグループを表示するのに最適であるため、非常に便利です。

スライドショー、紹介文のセクションをレンダリングする場合でも、スライダーで複数のメッセージを表示する場合でも、カルーセルは不可欠です。このチュートリアルでは、HTML、CSS、および単純な古いバニラJavaScriptだけでカルーセルを構築する方法を見ていきます。

構築済みのカルーセルコンポーネントに関する潜在的な問題

多くの場合、設計要件に基づいて、または美的理由からWebサイト内にカルーセルを実装する必要がある場合、時間を節約するために、既存のライブラリ、プラグイン、またはすでに構築されているものを使用することをすぐに検討します。

これは合理的で完全に問題ありませんが、外部ライブラリなどを使用すると、アプリケーションに不要な依存関係やコードの肥大化が追加されることがよくあります。これらの依存関係をダウンロードする必要があるため、ロード時間が長くなる可能性があります。また、ライブラリまたはプラグインと既存のアプリケーションコードベースとの間でコードの競合が発生する可能性があり、修正に時間がかかる場合があります。

HTML、CSS、およびバニラJavaScriptのみを使用して独自のカルーセルを構築することは、依存関係を追加せずに実装にかかる時間が短縮され、競合やエラーが発生しないため、最も効果的なソリューションになります。

それでは、始めましょう！

カルーセルのHTMLマークアップを作成する

カルーセルのHTMLマークアップ構造を作成することから始めます。物事を単純にするために、必要なHTML要素は次のとおりです。

  • メインスライダーコンテナdiv
  • 各スライドのラッパーdiv
  • Unsplashからの4つのランダムな画像をそれぞれ含む4つの実際のスライド
  • スライド間を移動するための2つのボタン

それでは、それを実行しましょう。

 <body>
   <!-- slider container -->
    <div class="slider">

      <!-- slide 1 -->
      <div class="slide">
        <img
          src="https://source.unsplash.com/random?landscape,mountain"
          alt=""
        />
      </div>

       <!-- slide 2 -->
      <div class="slide">
        <img src="https://source.unsplash.com/random?landscape,cars" alt="" />
      </div>

       <!-- slide 3 -->
      <div class="slide">
        <img src="https://source.unsplash.com/random?landscape,night" alt="" />
      </div>

       <!-- slide 4 -->
      <div class="slide">
        <img src="https://source.unsplash.com/random?landscape,city" alt="" />
      </div>

       <!-- Control buttons -->
      <button class="btn btn-next">></button>
      <button class="btn btn-prev"><
    </div>
  </body>

コードを実際のコンテンツマークアップで過度に複雑にしないように、カルーセルにはUnsplashの画像を使用することを選択しました。結果の出力を以下に示します。

 

これで問題が解決したので、CSSの部分に進み、カルーセルのスタイリングを開始する準備が整いました。

注：Unsplashランダム画像エンドポイントを使用しているため、ブラウザーをリロードするたびに、Unsplashからの新しいランダム画像のセットが提供されます。

カルーセルのCSSスタイルを作成する

それでは、カルーセルのCSSスタイルシートを作成して、カルーセルのスタイル設定に移りましょう。コードに入る前に、私たちが何をするかを見てみましょう：

  • まず、グリッドを使用してスライダーコンテナをbody要素の中央に配置します。また、スライダーコンテナとスライドに、レスポンシブな対応する固定の幅と高さを指定します
  • 次に、スライダーコンテナを相対位置に設定します。次に、これらのスライドの位置をそれぞれ絶対位置に設定するため、スライドの親コンテナになります。これにより、スライダーコンテナ内でそれらがすべて互いに重なり合うようになります
  • 最後に、absolute、transform、z-indexプロパティを使用して、前のボタンと次のボタンの両方をスライドの上に配置するようにスタイルを設定します
body {
  height: 100vh;
  display: grid;
  place-items: center;
}

.slider {
  width: 100%;
  max-width: 800px;
  height: 350px;
  position: relative;
  /* overflow: hidden; */
}

.slide {
  width: 100%;
  max-width: 800px;
  height: 350px;
  position: absolute;
  transition: all 0.5s;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btn {
  position: absolute;
  width: 40px;
  height: 40px;
  padding: 10px;
  border: none;
  border-radius: 50%;
  z-index: 10px;
  cursor: pointer;
  background-color: #fff;
  font-size: 18px;
}

.btn:active {
  transform: scale(1.1);
}

.btn-prev {
  top: 45%;
  left: 2%;
}

.btn-next {
  top: 45%;
  right: 2%;
}

上記のスライダースタイルルールのオーバーフロープロパティをコメントアウトしたことに注意してください。オーバーフローした画像を非表示にするために、後でこれが必要になります。しかし今のところ、スライダーで何が起こっているのかを確認できる必要があります。

結果の出力は次のようになります。

これがまだ明らかでない場合は、スライドの位置を絶対位置に設定しているため、4つのスライドはHTMLマークアップに表示される順序で積み重ねられます。スライダーを調べると、下に示すように、すべてのスライドがすぐそこにあり、最後のスライドが上に表示されていることがわかります。

バニラJavaScriptで動作させる

JavaScriptを使用したインタラクティブ機能をまだ追加していないため、カルーセルは現在機能していません。これはまさに次に行うことです。次と前のコントロールボタンにイベントリスナーを追加して、クリックするたびにスライドを左右に移動できるようにする必要があります。

これを実現するために、カルーセルをセクションごとに機能させるために必要なJavaScriptコードに取り組み、理解しやすく、理解しやすいようにします。

最初のステップは、すべてのスライドの配列（NodeList）を取得し、それぞれのtranslateXプロパティを100％に配列内の各スライドのインデックスを掛けた値に設定することです。配列はゼロベースのインデックスで順序付けられているため、最初のスライドは0、1、2、3のインデックスで始まります。これは、0パーセント、100パーセント、200パーセント、300パーセントに相当します。

// Select all slides
const slides = document.querySelectorAll(".slide");

// loop through slides and set each slides translateX property to index * 100% 
slides.forEach((slide, indx) => {
  slide.style.transform = `translateX(${indx * 100}%)`;
});

その結果、各スライドのtranslateXプロパティは0パーセント、100パーセント、200パーセント、および300パーセントになります。次に示すように、最後の3つのスライドはカルーセルスライダーコンテナの右側に水平にオーバーフローします。

注：スライドに対応するためにブラウザのウィンドウが50％にズームアウトされているため、上記のすべてのスライドを表示できます。これにより、スライドがどのようにレンダリングされるかを完全に確認できます。

開発ツールを使用してWebページを検査すると、上記のJavaScriptコードが以下に示すように正確に何をしたかがより明確になります。

ご覧のとおり、各スライドは、インデックス番号に100パーセントを掛けたものを使用して水平方向に変換されます。

次に、現在のスライドを追跡する初期の現在のスライドカウンターを作成し、次のボタンにイベントリスナーを追加し、ボタンがクリックされたときに現在のスライドを+1する関数を追加します。

次に、100％を掛ける前に、各インデックスから現在のスライドの値を減算します。これにより、ボタンがクリックされるたびに個々のスライドインデックスが-1ずつ低下します。これにより、スライドインデックスが-1に移動します（つまり、-1、0、1、2、もう一度クリックすると-2、-1、0、 1など）。

// current slide counter
let curSlide = 0;

// select next slide button
const nextSlide = document.querySelector(".btn-next");

// add event listener and next slide functionality
nextSlide.addEventListener("click", function () {
     curSlide++;

  slides.forEach((slide, indx) => {
    slide.style.transform = `translateX(${100 * (indx - curSlide)}%)`;
  });
});

前述のように、ボタンがクリックされると、インデックスの順序は0、1、2、3から-1、0、1、2になります（つまり、-100パーセント、0パーセント、100パーセント、200パーセント）。もう一度クリックすると、-1、0、1、2から-2、-1、0、1（つまり、-200パーセント、-100パーセント、0パーセント、100パーセント）などになります。結果は、各スライドが水平方向に左に-100％移動（移動）します。

しかし、今は問題があります。スライドは、最初のスライドに戻るのではなく、スライドの最後に到達した後でも、クリックするたびに動き続けます。これは、それをチェックする条件を記述していないためです。

次に、配列内のスライドの総数である4を保持する最大スライドカウンターを作成し、スライドのゼロベースのインデックス順序と一致するように1を減算します。

次に、この次のスライドイベント関数をリファクタリングして、現在のスライドが最大スライド値に等しいかどうか（つまり、最後のスライドにあるかどうか）を確認し、この条件が真の場合、現在のスライドの値を0にリセットします。 —スライドを最初のスライドに戻します。

// select next slide button
const nextSlide = document.querySelector(".btn-next");

// current slide counter
let curSlide = 0;
// maximum number of slides
let maxSlide = slides.length - 1;

// add event listener and navigation functionality
nextSlide.addEventListener("click", function () {
  // check if current slide is the last and reset current slide
  if (curSlide === maxSlide) {
    curSlide = 0;
  } else {
    curSlide++;
  }

//   move slide by -100%
  slides.forEach((slide, indx) => {
    slide.style.transform = `translateX(${100 * (indx - curSlide)}%)`;
  });
});

これで、以下に示すように、スライドが最後のスライドに当たったときに最初のスライドに戻るはずです。

次のボタンが機能するようになったので、前のボタンに移りましょう。

  • 前のボタンについては、次のボタンのイベント関数を複製し、1つだけ変更します。現在のスライドに+1を追加するのではなく、スライドが反対方向に移動するように-1を減算します。
  • 最後に、スライドが現在最初であるかどうか（つまり、0）をチェックする条件を追加し、そうである場合は、スライドを最後のスライド（最大スライド値）に移動します。
// select prev slide button
const prevSlide = document.querySelector(".btn-prev");

// add event listener and navigation functionality
prevSlide.addEventListener("click", function () {
  // check if current slide is the first and reset current slide to last
  if (curSlide === 0) {
    curSlide = maxSlide;
  } else {
    curSlide-;
  }

  //   move slide by 100%
  slides.forEach((slide, indx) => {
    slide.style.transform = `translateX(${100 * (indx - curSlide)}%)`;
  });
});

予想どおり、スライドは、以下に示すように、クリックすると次のスライドと反対方向（後方）に移動するはずです。

これで、スライドも完了しました。残りのステップは1つだけです。スライダーのCSSスタイルルールで非表示に設定されたオーバーフロープロパティをコメントアウトしたことを思い出してください。これを行ったのは、翻訳（移動）されたすべての画像を表示できるようにするためです。次に、そのプロパティのコメントを解除して、オーバーフローした画像が非表示になり、現在のスライドのみが常に表示されるようにします。

.slider {
  width: 100%;
  max-width: 800px;
  height: 350px;
  position: relative;
  overflow: hidden;  /* <===  */
  border-radius: 15px;
}

オーバーフローを非表示にし、境界線の半径を少し追加し、ブラウザのウィンドウを通常の状態にリセットすると、以下に示すように、完全に機能するカルーセルスライダーができあがります。

デモを試すには、 CodePenのインタラクティブな例を確認してください。このチュートリアルに関連する完全なソースコードは、GitHubにあります。

結論

おめでとうございます！HTML、CSS、および昔ながらのバニラJavaScriptだけで機能的なカルーセルを構築する方法を学びました。機能を拡張して、矢印キーを使用してナビゲートしたり、ドットを含めて現在のスライドやスライドの数などを強調表示したりして、アクセスしやすくすることができます。

このカルーセルには、画像、実際のマークアップコンテンツ、証言、サービスなど、必要なコンテンツを配置することもできます。どちらの方法でも、かさばるライブラリを使用して単純なカルーセルを作成する必要がなくなりました。

このチュートリアルを楽しんでいただき、お役に立てば幸いです。

ソース：https ：//blog.logrocket.com/build-image-carousel-from-scratch-vanilla-javascript/ 

#javascript #carousel 

What is GEEK

Buddha Community

バニラJavaScriptを使用して画像カルーセルを最初から作成する
高橋 花子

高橋 花子

1649826300

バニラJavaScriptを使用して画像カルーセルを最初から作成する

カルーセルがWebサイトのデザインに不可欠なコンポーネントであることは間違いありません。スペースに限りがある場合。スペースに限りがあるが、それでも多くの情報を表示したい場合、カルーセルは、関連するコンテンツまたは関連しないコンテンツのグループを表示するのに最適であるため、非常に便利です。

スライドショー、紹介文のセクションをレンダリングする場合でも、スライダーで複数のメッセージを表示する場合でも、カルーセルは不可欠です。このチュートリアルでは、HTML、CSS、および単純な古いバニラJavaScriptだけでカルーセルを構築する方法を見ていきます。

構築済みのカルーセルコンポーネントに関する潜在的な問題

多くの場合、設計要件に基づいて、または美的理由からWebサイト内にカルーセルを実装する必要がある場合、時間を節約するために、既存のライブラリ、プラグイン、またはすでに構築されているものを使用することをすぐに検討します。

これは合理的で完全に問題ありませんが、外部ライブラリなどを使用すると、アプリケーションに不要な依存関係やコードの肥大化が追加されることがよくあります。これらの依存関係をダウンロードする必要があるため、ロード時間が長くなる可能性があります。また、ライブラリまたはプラグインと既存のアプリケーションコードベースとの間でコードの競合が発生する可能性があり、修正に時間がかかる場合があります。

HTML、CSS、およびバニラJavaScriptのみを使用して独自のカルーセルを構築することは、依存関係を追加せずに実装にかかる時間が短縮され、競合やエラーが発生しないため、最も効果的なソリューションになります。

それでは、始めましょう！

カルーセルのHTMLマークアップを作成する

カルーセルのHTMLマークアップ構造を作成することから始めます。物事を単純にするために、必要なHTML要素は次のとおりです。

  • メインスライダーコンテナdiv
  • 各スライドのラッパーdiv
  • Unsplashからの4つのランダムな画像をそれぞれ含む4つの実際のスライド
  • スライド間を移動するための2つのボタン

それでは、それを実行しましょう。

 <body>
   <!-- slider container -->
    <div class="slider">

      <!-- slide 1 -->
      <div class="slide">
        <img
          src="https://source.unsplash.com/random?landscape,mountain"
          alt=""
        />
      </div>

       <!-- slide 2 -->
      <div class="slide">
        <img src="https://source.unsplash.com/random?landscape,cars" alt="" />
      </div>

       <!-- slide 3 -->
      <div class="slide">
        <img src="https://source.unsplash.com/random?landscape,night" alt="" />
      </div>

       <!-- slide 4 -->
      <div class="slide">
        <img src="https://source.unsplash.com/random?landscape,city" alt="" />
      </div>

       <!-- Control buttons -->
      <button class="btn btn-next">></button>
      <button class="btn btn-prev"><
    </div>
  </body>

コードを実際のコンテンツマークアップで過度に複雑にしないように、カルーセルにはUnsplashの画像を使用することを選択しました。結果の出力を以下に示します。

 

これで問題が解決したので、CSSの部分に進み、カルーセルのスタイリングを開始する準備が整いました。

注：Unsplashランダム画像エンドポイントを使用しているため、ブラウザーをリロードするたびに、Unsplashからの新しいランダム画像のセットが提供されます。

カルーセルのCSSスタイルを作成する

それでは、カルーセルのCSSスタイルシートを作成して、カルーセルのスタイル設定に移りましょう。コードに入る前に、私たちが何をするかを見てみましょう：

  • まず、グリッドを使用してスライダーコンテナをbody要素の中央に配置します。また、スライダーコンテナとスライドに、レスポンシブな対応する固定の幅と高さを指定します
  • 次に、スライダーコンテナを相対位置に設定します。次に、これらのスライドの位置をそれぞれ絶対位置に設定するため、スライドの親コンテナになります。これにより、スライダーコンテナ内でそれらがすべて互いに重なり合うようになります
  • 最後に、absolute、transform、z-indexプロパティを使用して、前のボタンと次のボタンの両方をスライドの上に配置するようにスタイルを設定します
body {
  height: 100vh;
  display: grid;
  place-items: center;
}

.slider {
  width: 100%;
  max-width: 800px;
  height: 350px;
  position: relative;
  /* overflow: hidden; */
}

.slide {
  width: 100%;
  max-width: 800px;
  height: 350px;
  position: absolute;
  transition: all 0.5s;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btn {
  position: absolute;
  width: 40px;
  height: 40px;
  padding: 10px;
  border: none;
  border-radius: 50%;
  z-index: 10px;
  cursor: pointer;
  background-color: #fff;
  font-size: 18px;
}

.btn:active {
  transform: scale(1.1);
}

.btn-prev {
  top: 45%;
  left: 2%;
}

.btn-next {
  top: 45%;
  right: 2%;
}

上記のスライダースタイルルールのオーバーフロープロパティをコメントアウトしたことに注意してください。オーバーフローした画像を非表示にするために、後でこれが必要になります。しかし今のところ、スライダーで何が起こっているのかを確認できる必要があります。

結果の出力は次のようになります。

これがまだ明らかでない場合は、スライドの位置を絶対位置に設定しているため、4つのスライドはHTMLマークアップに表示される順序で積み重ねられます。スライダーを調べると、下に示すように、すべてのスライドがすぐそこにあり、最後のスライドが上に表示されていることがわかります。

バニラJavaScriptで動作させる

JavaScriptを使用したインタラクティブ機能をまだ追加していないため、カルーセルは現在機能していません。これはまさに次に行うことです。次と前のコントロールボタンにイベントリスナーを追加して、クリックするたびにスライドを左右に移動できるようにする必要があります。

これを実現するために、カルーセルをセクションごとに機能させるために必要なJavaScriptコードに取り組み、理解しやすく、理解しやすいようにします。

最初のステップは、すべてのスライドの配列（NodeList）を取得し、それぞれのtranslateXプロパティを100％に配列内の各スライドのインデックスを掛けた値に設定することです。配列はゼロベースのインデックスで順序付けられているため、最初のスライドは0、1、2、3のインデックスで始まります。これは、0パーセント、100パーセント、200パーセント、300パーセントに相当します。

// Select all slides
const slides = document.querySelectorAll(".slide");

// loop through slides and set each slides translateX property to index * 100% 
slides.forEach((slide, indx) => {
  slide.style.transform = `translateX(${indx * 100}%)`;
});

その結果、各スライドのtranslateXプロパティは0パーセント、100パーセント、200パーセント、および300パーセントになります。次に示すように、最後の3つのスライドはカルーセルスライダーコンテナの右側に水平にオーバーフローします。

注：スライドに対応するためにブラウザのウィンドウが50％にズームアウトされているため、上記のすべてのスライドを表示できます。これにより、スライドがどのようにレンダリングされるかを完全に確認できます。

開発ツールを使用してWebページを検査すると、上記のJavaScriptコードが以下に示すように正確に何をしたかがより明確になります。

ご覧のとおり、各スライドは、インデックス番号に100パーセントを掛けたものを使用して水平方向に変換されます。

次に、現在のスライドを追跡する初期の現在のスライドカウンターを作成し、次のボタンにイベントリスナーを追加し、ボタンがクリックされたときに現在のスライドを+1する関数を追加します。

次に、100％を掛ける前に、各インデックスから現在のスライドの値を減算します。これにより、ボタンがクリックされるたびに個々のスライドインデックスが-1ずつ低下します。これにより、スライドインデックスが-1に移動します（つまり、-1、0、1、2、もう一度クリックすると-2、-1、0、 1など）。

// current slide counter
let curSlide = 0;

// select next slide button
const nextSlide = document.querySelector(".btn-next");

// add event listener and next slide functionality
nextSlide.addEventListener("click", function () {
     curSlide++;

  slides.forEach((slide, indx) => {
    slide.style.transform = `translateX(${100 * (indx - curSlide)}%)`;
  });
});

前述のように、ボタンがクリックされると、インデックスの順序は0、1、2、3から-1、0、1、2になります（つまり、-100パーセント、0パーセント、100パーセント、200パーセント）。もう一度クリックすると、-1、0、1、2から-2、-1、0、1（つまり、-200パーセント、-100パーセント、0パーセント、100パーセント）などになります。結果は、各スライドが水平方向に左に-100％移動（移動）します。

しかし、今は問題があります。スライドは、最初のスライドに戻るのではなく、スライドの最後に到達した後でも、クリックするたびに動き続けます。これは、それをチェックする条件を記述していないためです。

次に、配列内のスライドの総数である4を保持する最大スライドカウンターを作成し、スライドのゼロベースのインデックス順序と一致するように1を減算します。

次に、この次のスライドイベント関数をリファクタリングして、現在のスライドが最大スライド値に等しいかどうか（つまり、最後のスライドにあるかどうか）を確認し、この条件が真の場合、現在のスライドの値を0にリセットします。 —スライドを最初のスライドに戻します。

// select next slide button
const nextSlide = document.querySelector(".btn-next");

// current slide counter
let curSlide = 0;
// maximum number of slides
let maxSlide = slides.length - 1;

// add event listener and navigation functionality
nextSlide.addEventListener("click", function () {
  // check if current slide is the last and reset current slide
  if (curSlide === maxSlide) {
    curSlide = 0;
  } else {
    curSlide++;
  }

//   move slide by -100%
  slides.forEach((slide, indx) => {
    slide.style.transform = `translateX(${100 * (indx - curSlide)}%)`;
  });
});

これで、以下に示すように、スライドが最後のスライドに当たったときに最初のスライドに戻るはずです。

次のボタンが機能するようになったので、前のボタンに移りましょう。

  • 前のボタンについては、次のボタンのイベント関数を複製し、1つだけ変更します。現在のスライドに+1を追加するのではなく、スライドが反対方向に移動するように-1を減算します。
  • 最後に、スライドが現在最初であるかどうか（つまり、0）をチェックする条件を追加し、そうである場合は、スライドを最後のスライド（最大スライド値）に移動します。
// select prev slide button
const prevSlide = document.querySelector(".btn-prev");

// add event listener and navigation functionality
prevSlide.addEventListener("click", function () {
  // check if current slide is the first and reset current slide to last
  if (curSlide === 0) {
    curSlide = maxSlide;
  } else {
    curSlide-;
  }

  //   move slide by 100%
  slides.forEach((slide, indx) => {
    slide.style.transform = `translateX(${100 * (indx - curSlide)}%)`;
  });
});

予想どおり、スライドは、以下に示すように、クリックすると次のスライドと反対方向（後方）に移動するはずです。

これで、スライドも完了しました。残りのステップは1つだけです。スライダーのCSSスタイルルールで非表示に設定されたオーバーフロープロパティをコメントアウトしたことを思い出してください。これを行ったのは、翻訳（移動）されたすべての画像を表示できるようにするためです。次に、そのプロパティのコメントを解除して、オーバーフローした画像が非表示になり、現在のスライドのみが常に表示されるようにします。

.slider {
  width: 100%;
  max-width: 800px;
  height: 350px;
  position: relative;
  overflow: hidden;  /* <===  */
  border-radius: 15px;
}

オーバーフローを非表示にし、境界線の半径を少し追加し、ブラウザのウィンドウを通常の状態にリセットすると、以下に示すように、完全に機能するカルーセルスライダーができあがります。

デモを試すには、 CodePenのインタラクティブな例を確認してください。このチュートリアルに関連する完全なソースコードは、GitHubにあります。

結論

おめでとうございます！HTML、CSS、および昔ながらのバニラJavaScriptだけで機能的なカルーセルを構築する方法を学びました。機能を拡張して、矢印キーを使用してナビゲートしたり、ドットを含めて現在のスライドやスライドの数などを強調表示したりして、アクセスしやすくすることができます。

このカルーセルには、画像、実際のマークアップコンテンツ、証言、サービスなど、必要なコンテンツを配置することもできます。どちらの方法でも、かさばるライブラリを使用して単純なカルーセルを作成する必要がなくなりました。

このチュートリアルを楽しんでいただき、お役に立てば幸いです。

ソース：https ：//blog.logrocket.com/build-image-carousel-from-scratch-vanilla-javascript/ 

#javascript #carousel