Embla Carousel - 軽量で滑らかなカルーセルライブラリを使ってみた

はじめに

Webサイトを作っていると、カルーセル（スライダー）を実装する場面って意外と多いんですよね。商品一覧、画像ギャラリー、お客様の声など、限られたスペースで複数のコンテンツを見せたいときに便利です。

ただ、カルーセルライブラリって選択肢が多すぎて迷いませんか。Swiper、Slick、Flickityなど有名どころはいくつかありますが、今回紹介するEmbla Carouselは、個人的にかなり気に入っているライブラリです。

軽量で、スワイプの動きが自然で、何より拡張性が高い。37万以上のプロジェクトで使われているという実績もあります。

Embla Carouselの特徴・メリット

軽量で依存関係がない

正直なところ、カルーセルライブラリって重くなりがちなんですよね。でもEmbla Carouselは依存関係がなく、バンドルサイズが小さいのが特徴です。パフォーマンスを気にするプロジェクトでも安心して使えます。

スワイプ精度が高い

モバイルでのスワイプ操作、これ意外と重要なんですよ。安っぽいカルーセルだと、スワイプしたときに「カクッ」となったり、意図しない方向に動いたりすることがあります。

Embla Carouselは「fluid motion and great swipe precision」を謳っているだけあって、スワイプの動きが本当に滑らかです。ユーザー体験がワンランク上がる感じがします。

複数フレームワークに対応

対応しているフレームワークは以下の通りです。

• Vanilla JavaScript / TypeScript
• React
• Vue
• Svelte
• Solid
• CDN（直接読み込み）

Angularについてはコミュニティ製のラッパーがあります。これだけ対応していれば、大抵のプロジェクトで使えますね。

プラグインシステム

Autoplay、ナビゲーションボタン、ドットインジケーターなど、必要な機能をプラグインとして追加できます。必要なものだけ入れられるので、無駄がないんですよね。

活発な開発

GitHub上でスター数7,900以上、1,762のコミット、51名の貢献者がいる活発なプロジェクトです。最新バージョンはv8.6.0（2025年4月リリース）で、継続的にメンテナンスされています。

インストール方法

Vanilla JavaScript / TypeScript

npm install embla-carousel

React

npm install embla-carousel-react

Vue

npm install embla-carousel-vue

Svelte

npm install embla-carousel-svelte

CDN

<script src="https://unpkg.com/embla-carousel/embla-carousel.umd.js"></script>

基本的な使い方

HTML構造

まず基本的なHTML構造を理解しておく必要があります。

<div class="embla">
  <div class="embla__container">
    <div class="embla__slide">スライド 1</div>
    <div class="embla__slide">スライド 2</div>
    <div class="embla__slide">スライド 3</div>
  </div>
</div>

必須のCSS

.embla {
  overflow: hidden;
}

.embla__container {
  display: flex;
}

.embla__slide {
  flex: 0 0 100%;
  min-width: 0;
}

この3つのスタイルは必須です。これがないと正しく動作しません。

Vanilla JavaScriptでの実装

import EmblaCarousel from 'embla-carousel'

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

// 前後のスライドに移動
emblaApi.scrollPrev()
emblaApi.scrollNext()

Reactでの実装

Reactで使う場合は専用のフックが用意されています。

import React from 'react'
import useEmblaCarousel from 'embla-carousel-react'

export function EmblaCarousel() {
  const [emblaRef] = useEmblaCarousel()

  return (
    <div className="embla" ref={emblaRef}>
      <div className="embla__container">
        <div className="embla__slide">スライド 1</div>
        <div className="embla__slide">スライド 2</div>
        <div className="embla__slide">スライド 3</div>
      </div>
    </div>
  )
}

シンプルですよね。refを渡すだけで基本的な動作は完成します。

オプションの設定

const [emblaRef] = useEmblaCarousel({
  loop: true,           // ループ再生
  align: 'start',       // スライドの配置（start, center, end）
  slidesToScroll: 1,    // 一度にスクロールするスライド数
  dragFree: false,      // 自由ドラッグモード
})

実践的なユースケース

Autoplayプラグインの追加

自動再生が必要な場合は、Autoplayプラグインを追加します。

npm install embla-carousel-autoplay

import useEmblaCarousel from 'embla-carousel-react'
import Autoplay from 'embla-carousel-autoplay'

export function EmblaCarousel() {
  const [emblaRef] = useEmblaCarousel({ loop: true }, [Autoplay()])

  return (
    <div className="embla" ref={emblaRef}>
      <div className="embla__container">
        <div className="embla__slide">スライド 1</div>
        <div className="embla__slide">スライド 2</div>
        <div className="embla__slide">スライド 3</div>
      </div>
    </div>
  )
}

ナビゲーションボタンの実装

import React, { useCallback } from 'react'
import useEmblaCarousel from 'embla-carousel-react'

export function EmblaCarousel() {
  const [emblaRef, emblaApi] = useEmblaCarousel()

  const scrollPrev = useCallback(() => {
    if (emblaApi) emblaApi.scrollPrev()
  }, [emblaApi])

  const scrollNext = useCallback(() => {
    if (emblaApi) emblaApi.scrollNext()
  }, [emblaApi])

  return (
    <div className="embla">
      <div className="embla__viewport" ref={emblaRef}>
        <div className="embla__container">
          <div className="embla__slide">スライド 1</div>
          <div className="embla__slide">スライド 2</div>
          <div className="embla__slide">スライド 3</div>
        </div>
      </div>
      <button onClick={scrollPrev}>前へ</button>
      <button onClick={scrollNext}>次へ</button>
    </div>
  )
}

useEmblaCarouselの戻り値の2番目がemblaApiで、これを使ってプログラムからカルーセルを操作できます。

複数スライド表示

複数のスライドを同時に表示したい場合は、CSSを調整します。

.embla__slide {
  flex: 0 0 33.33%;  /* 3つ同時表示 */
  min-width: 0;
  padding: 0 10px;
}

まとめ

Embla Carouselは、軽量でスワイプ精度が高く、複数フレームワークに対応した実用的なカルーセルライブラリです。

個人的に気に入っているポイントをまとめると、

• バンドルサイズが小さくパフォーマンスが良い
• スワイプの動きが自然で気持ちいい
• 必要な機能だけプラグインで追加できる
• APIがシンプルで学習コストが低い

カルーセルライブラリを探している方は、一度試してみる価値があると思います。公式ドキュメントも充実しているので、実装で困ることは少ないはずです。

参考リンク

• Embla Carousel 公式サイト
• GitHub リポジトリ
• NPM パッケージ