CSSとJavaScriptを活用したカルーセルスライダーの作り方

サムネイル
               

 

この記事では、カルーセルスライダーが何であるかをわかりやすく説明しているよ。

 

そして、それがウェブデザインにどう使われ、CSSとJavaScriptがどう関わってくるのかも説明しているんだ。

 

カルーセルスライダーの基本的な理解を深めて、次のセクションで具体的にカルーセルスライダーを作る方法を学んでみてね。

 

CSSとJavaScriptを活用したカルーセルスライダーの作り方

カルーセルスライダーとは何か？

カルーセルスライダーっていうのは、ウェブサイトでよく見かけるやつで、画像やテキストが左右にスライドするやつのことだよ。

 

ランディングページ（訪れた人が最初に目にするページ）や商品紹介ページでよく使われているよ。

 

カルーセルスライダーは、動きがあるから目を引くし、ウェブサイトを見ている人が楽しめるようになるんだ。

 

自動的にスライドするものもあれば、ユーザーが「次へ」ボタンを押してスライドさせるものもあるよ。

 

ウェブサイトでカルーセルスライダーを作るときには、CSSとJavaScriptっていう2つの技術がよく使われるんだ。

 

 

CSSは、スライダーの見た目を決める役割があるんだよ。JavaScriptは、ユーザーが何か操作したときに、それに反応してスライダーが動くようにする役割があるんだ。

 

次のセクションでは、これらの技術を使って実際にカルーセルスライダーを作る方法について説明するよ。

 

 

カルーセルスライダーの設計

カルーセルスライダーを作るためには、いくつかのステップが必要なんだ。それぞれのステップを詳しく見ていこう。

  1. HTMLを作る
    • 最初にやることは、カルーセルスライダーに表示する内容（画像やテキストなど）を含むHTML要素を作ることだよ。これらの要素は、普通、divタグやimgタグなどを使って作られるんだ。
  2. CSSで見た目を整える
    • 次に、CSSを使ってカルーセルスライダーの見た目を整えるんだ。これには、内容の配置やサイズ、色などのスタイルを設定する作業が含まれるよ。
  3. JavaScriptで動きをつける
    • 最後に、JavaScriptを使ってカルーセルスライダーに動きをつけるんだ。これには、スライドの切り替えや自動スライド、ユーザーが操作したときのスライドの制御などの機能を実装する作業が含まれるよ。

 

 

これらのステップを踏むことで、動きがあって見た目もいいカルーセルスライダーを作ることができるんだ。でも、これらは基本的なステップで、具体的な実装は使う技術や目指すデザインによって変わるよ。

次のセクションでは、CSSとJavaScriptを使って具体的にカルーセルスライダーをどう作るかについて詳しく説明するよ。

 

今回使うHTML

 

<section id="business">
    <h2 class="section-title">
      <span class="en">MENU</span>
      <span class="ja">サービス内容</span>
    </h2>
    <div class="carousel">
      <div class="slide">
        <p class="title">Cut</p>
        <img src="<?php echo get_template_directory_uri(); ?>/img/business1.jpg" alt="" loading="lazy">
      </div>
      <div class="slide">
        <p class="title">Perm</p>
        <img src="<?php echo get_template_directory_uri(); ?>/img/business2.jpg" alt="" loading="lazy">
      </div>
      <div class="slide">
        <p class="title">Colouring</p>
        <img src="<?php echo get_template_directory_uri(); ?>/img/business3.jpg" alt="" loading="lazy">
      </div>
      <div class="slide">
        <p class="title">Nail</p>
        <img src="<?php echo get_template_directory_uri(); ?>/img/business4.jpg" alt="" loading="lazy">
      </div>
      <div class="slide">
        <p class="title">Cut</p>
        <img src="<?php echo get_template_directory_uri(); ?>/img/business1.jpg" alt="" loading="lazy">
      </div>
    </div>
  </section>

 

CSSでカルーセルスライダーをスタイリングする方法

1枚目から4枚目の後に1枚目に逆戻り

 

/* business */
#business .title {
  font-size: 1.8rem;
}


/* カルーセルの外枠 */
.carousel {
  width: 520px;
  height: 420px;
  display: flex; /* 子要素を横に並べる */
  overflow: hidden; /* はみ出た部分は表示しない */
  margin: 0 auto; /* 水平方向中央寄せ */
}
/* カルーセル内の画像 */
.carousel img {
  margin: 0;
  padding: 0;
  display: block; /* imgタグの改行のすき間を消すため */
}
/* スクロールアニメーションのキーフレーム */
@keyframes scroll {
  0% {
    transform: translateX(0%);
  }
  20% {
    transform: translateX(0%);
  }
  25% {
    transform: translateX(-100%);
  }
  45% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(-200%);
  }
  70% {
    transform: translateX(-200%);
  }
  75% {
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(0%);
  }
}


/* カルーセルの子要素にスクロールアニメーションを設定 */
.carousel {
  display: flex; /* 子要素を横に並べる */
  overflow: hidden; /* はみ出た部分は表示しない */
  width: 520px; /* カルーセルの幅 */
  height: 420px; /* カルーセルの高さ */
  margin: 0 auto; /* 水平方向中央寄せ */
}


.carousel .slide {
  flex: 0 0 100%; /* スライドの幅を100%に設定 */
}


/* スクロールアニメーションを適用 */
.carousel .slide {
  animation: scroll 20s linear infinite;
}

 

1枚目から4枚目の後に1枚目に同じ方向

 

/* business */
#business .title {
  font-size: 1.8rem;
}


/* カルーセルの外枠 */
.carousel {
  width: 520px;
  height: 420px;
  display: flex; /* 子要素を横に並べる */
  overflow: hidden; /* はみ出た部分は表示しない */
  margin: 0 auto; /* 水平方向中央寄せ */
}
/* カルーセル内の画像 */
.carousel img {
  margin: 0;
  padding: 0;
  display: block; /* imgタグの改行のすき間を消すため */
}
/* スクロールアニメーションのキーフレーム */
@keyframes scroll {
  0% {
    transform: translateX(0%);
  }
  25% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(-200%);
  }
  75% {
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(-400%);
  }
}
/* カルーセルの子要素にスクロールアニメーションを設定 */
.carousel {
  display: flex; /* 子要素を横に並べる */
  overflow: hidden; /* はみ出た部分は表示しない */
  width: 520px; /* カルーセルの幅 */
  height: 420px; /* カルーセルの高さ */
  margin: 0 auto; /* 水平方向中央寄せ */
}


.carousel .slide {
  flex: 0 0 100%; /* スライドの幅を100%に設定 */
}


/* スクロールアニメーションを適用 */
.carousel .slide {
  animation: scroll 20s linear infinite;
}

 

 

JavaScriptでカルーセルスライダーを動かす方法

 

下部ボタン

 

クリックすると横にスライドするようになるので、ボタンのHTMLを新たに作る必要があります。

<div class="slide">
          <p class="title">Nail</p>
          <img src="<?php echo get_template_directory_uri(); ?>/img/business4.jpg" alt="" loading="">
        </div>
      </div>
      <button onclick="nextSlide()">Next</button><!--ここが追加部分 -->
    </div>
  </section>

 

/* スライダーのスタイル */
.carousel-container {
  width: 520px; /* 任意の幅を指定 */
  overflow: hidden;
  margin: 0 auto;
  border: 2px solid #ccc; /* 枠のスタイルを指定 */
  border-radius: 8px; /* 枠の角を丸くする場合に指定 */
  position: relative; /* 相対位置指定 */
  margin-bottom: 30px;
}


/* カルーセルのスタイル */
.carousel {
  display: flex;
  transition: transform 0.5s ease-in-out;
}


/* スライドのスタイルは変更なし */
.slide {
  flex: 0 0 100%;
  box-sizing: border-box;
  text-align: center; /* タイトルを中央寄せ */
}


.slide img {
  width: 100%;
  height: auto;
}


.slide p {
  font-size: large;
}


/* ボタンのスタイル */
button {
  margin-top: 10px;
  cursor: pointer;
  position: absolute; /* 絶対位置指定 */
  bottom: -2%;
  transform: translateY(-50%); /* ボタンの中央を揃える */
  left: 50%; /* 任意の左側の余白を指定 */
}


/* スライダーのトランジションを管理するクラス */
.slide-transition {
  transition: transform 0.5s ease-in-out;
}
let currentIndex = 0;


function nextSlide() {
  const slides = document.querySelectorAll(".slide");
  currentIndex = (currentIndex + 1) % slides.length;
  updateSlider();
}


function updateSlider() {
  const slides = document.querySelectorAll(".slide");
  const sliderWidth = slides[0].offsetWidth; // 1枚のスライドの横幅を取得
  const newPosition = -currentIndex * sliderWidth + "px";
  document.querySelector(".carousel").style.transition =
    "transform 0.5s ease-in-out";
  document.querySelector(".carousel").style.transform =
    "translateX(" + newPosition + ")";
}

 

 

サイドボタンと下部インディケーター

 


サイドのボタンと下部のインディケーターのHTMLを追加します。

        <div class="slide">
          <p class="title">Nail</p>
          <img src="<?php echo get_template_directory_uri(); ?>/img/business4.jpg" alt="" loading="">
        </div>
      </div>
      <ul class="indicator">
        <li onclick="goToSlide(0)"></li>
        <li onclick="goToSlide(1)"></li>
        <li onclick="goToSlide(2)"></li>
        <li onclick="goToSlide(3)"></li>
      </ul>
      <button class="prev" onclick="prevSlide()">‹</button>
      <button class="next" onclick="nextSlide()">›</button>
    </div>
  </section>

 

button {
  position: absolute;
  top: 45%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
}


.next {
  right: 10px;
  border-radius: 2px 0 0 2px;
}


.prev {
  left: 10px;
  border-radius: 0 2px 2px 0;
}


button:hover {
  opacity: 1;
  transition: all 0.2s ease;
}


.indicator {
  width: 100%;
  position: absolute;
  bottom: 10px;
  display: flex;
  column-gap: 10px;
  justify-content: center;
  align-items: center;
}


.indicator li {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  list-style: none;
  background-color: #fff;
  border: 2px #000 solid;
  cursor: pointer;
}


.indicator li.active {
  background-color: #000;
}


/* Additional styles for the slider */
.carousel {
  display: flex;
  transition: transform 0.5s ease-in-out;
}


.slide {
  flex: 0 0 100%;
  box-sizing: border-box;
  text-align: center;
}


.slide img {
  width: 100%;
  height: auto;
}

 

let currentIndex = 0;


function updateSlider() {
  const slides = document.querySelectorAll(".slide");
  const sliderWidth = slides[0].offsetWidth;
  const newPosition = -currentIndex * sliderWidth + "px";
  document.querySelector(".carousel").style.transform =
    "translateX(" + newPosition + ")";


  // Update indicator
  const indicators = document.querySelectorAll(".indicator li");
  indicators.forEach((indicator, index) => {
    if (index === currentIndex) {
      indicator.classList.add("active");
    } else {
      indicator.classList.remove("active");
    }
  });
}


function nextSlide() {
  const slides = document.querySelectorAll(".slide");
  currentIndex = (currentIndex + 1) % slides.length;
  updateSlider();
}


function prevSlide() {
  const slides = document.querySelectorAll(".slide");
  currentIndex = (currentIndex - 1 + slides.length) % slides.length;
  updateSlider();
}


function goToSlide(index) {
  currentIndex = index;
  updateSlider();
}

 

 

まとめ

それでは、おさらいとしてまとめていきますね。

カルーセルスライダーとは何か？

カルーセルスライダーは、ウェブサイトやアプリケーションでよく見られる画像やコンテンツを順番に切り替えて表示するコンポーネントのことです。ユーザーは複数の画像やコンテンツを同じ領域でスライドさせ、情報を見ることができます。

 

カルーセルスライダーの設計

カルーセルスライダーの基本的な設計は、表示される要素（画像やコンテンツ）、スライドのアニメーション方法、ナビゲーションコントロール（ボタンやインディケーター）などが含まれます。

 

CSSでカルーセルスライダーをスタイリングする方法

CSSを使用することで、基本的なデザインやアニメーションの設定が可能です。スライドが最後までいったら最初に逆戻りしたり、同じ方向にスライドしたりするようなスタイルを適用できます。

 

JavaScriptでカルーセルスライダーを動かす方法

JavaScriptを導入することで、カルーセルスライダーに対する動的な制御が実現できます。ユーザーが下部ボタンやサイドボタンをクリックしたときに、アクティブなスライドの追跡や対応するスライドへの移動が可能です。

 

以上が、CSSとJavaScriptを活用したカルーセルスライダーの基本的な実装手順と設計の概要です。これにより、ウェブサイトやアプリケーションに動的で魅力的なコンテンツの表示が可能となります。