Embla Carouselについて

Embla Carouselとは

軽量で柔軟なスライダーライブラリ。
頻繁に更新されており安定して使用できる。
※記事作成時（2025/4/23）は2週間前に更新されている。

週間で400万以上ダウンロードされている。

https://www.embla-carousel.com/

使用方法

1. 下記コードを設置。

<script src="https://cdn.jsdelivr.net/npm/embla-carousel@8.6.0/embla-carousel.umd.min.js"></script>

2. HTML, CSSを記述 ※クラス名は任意です。

<div>
  <div class="embla">
    <div class="embla__container">
      <div class="embla__slide">
        <img src='/assets/bird.jpg' width='640' height='427' alt=''>
      </div>
      <div class="embla__slide">
        <img src='/assets/tanuki.jpg' width='640' height='427' alt=''>
      </div>
      <div class="embla__slide">
        <img src='/assets/tiger.jpg' width='640' height='396' alt=''>
      </div>
      <div class="embla__slide">
        <img src='/assets/turtle.jpg' width='640' height='400' alt=''>
      </div>
    </div>
  </div>
  <div class="embla__dots"></div>
</div>

.embla {
  overflow: hidden;
}

.embla__container {
  display: flex;
}

.embla__slide {
  display: grid;
  place-items: center;
  flex: 0 0 100%;
  min-width: 0;
  border-radius: 10px;
  overflow: hidden;
  height: 400px;
}

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

.embla__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.embla__dot {
  appearance: none;
  background-color: #767676;
  display: inline-flex;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  padding: 0;
  margin: 0;
  width: 10px;
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.embla__dot--selected {
  background-color: #fff;
}

3. JSを記述

const addDotBtnsAndClickHandlers = (emblaApi, dotsNode) => {
  let dotNodes = [];

  // dotを生成する処理とdotをクリックした時の処理をまとめた関数
  const addDotBtnsWithClickHandlers = () => {
    dotsNode.innerHTML = emblaApi
      .scrollSnapList()
      .map(() => '<button class="embla__dot" type="button"></button>')
      .join('');

    const scrollTo = (index) => {
      emblaApi.scrollTo(index);
    };

    dotNodes = Array.from(dotsNode.querySelectorAll('.embla__dot'));
    dotNodes.forEach((dotNode, index) => {
      dotNode.addEventListener('click', () => scrollTo(index), false);
    });
  };

  // dotをクリックした時にクラス名を切り替える関数
  const toggleDotBtnsActive = () => {
    const previous = emblaApi.previousScrollSnap();
    const selected = emblaApi.selectedScrollSnap();
    dotNodes[previous].classList.remove('embla__dot--selected');
    dotNodes[selected].classList.add('embla__dot--selected');
  };

  emblaApi.on('init', addDotBtnsWithClickHandlers).on('reInit', addDotBtnsWithClickHandlers).on('init', toggleDotBtnsActive).on('reInit', toggleDotBtnsActive).on('select', toggleDotBtnsActive);

  return () => {
    dotsNode.innerHTML = '';
  };
};

const emblaNode = document.querySelector('.embla');
const options = { loop: false };
const emblaApi = EmblaCarousel(emblaNode, options);

const dotsNode = document.querySelector('.embla__dots');

const removeDotBtnsAndClickHandlers = addDotBtnsAndClickHandlers(emblaApi, dotsNode);

emblaApi.on('destroy', removeDotBtnsAndClickHandlers);

【実装後の挙動】

オプションとプラグイン

https://www.embla-carousel.com/api/options/

https://www.embla-carousel.com/api/plugins/

使用してみての感想

当社ではSplideを使用することが多いが、比較すると実装が複雑な印象を受けた。
https://ja.splidejs.com/

また、フェードアニメーションや自動再生などはデフォルトで搭載されていないため、別途CDNから引っ張ってくる必要がある。
ただスタイルの調整などが柔軟にでき、「Generator」を用いると自動でコードを作成してくれるので（CodeSandBoxに生成される）、使い勝手は良いと感じる。

スライダー実装の選択肢の一つとして、Embla Carouselを導入するのも良いかと思う。