Carousel

プレビューを読み込み中

<div class="carousel-embla-basic js-carousel-embla-basic">
  <div class="carousel-embla-basic__viewport">
    <div class="carousel-embla-basic__container">
      <div class="carousel-embla-basic__slide">
        <img
          class="carousel-embla-basic__image"
          src="/snippets/card-sample-01.jpg"
          alt=""
          width="640"
          height="360"
          decoding="async"
        />
      </div>
      <div class="carousel-embla-basic__slide">
        <img
          class="carousel-embla-basic__image"
          src="/snippets/card-sample-01.jpg"
          alt=""
          width="640"
          height="360"
          decoding="async"
        />
      </div>
      <div class="carousel-embla-basic__slide">
        <img
          class="carousel-embla-basic__image"
          src="/snippets/card-sample-01.jpg"
          alt=""
          width="640"
          height="360"
          decoding="async"
        />
      </div>
      <div class="carousel-embla-basic__slide">
        <img
          class="carousel-embla-basic__image"
          src="/snippets/card-sample-01.jpg"
          alt=""
          width="640"
          height="360"
          decoding="async"
        />
      </div>
      <div class="carousel-embla-basic__slide">
        <img
          class="carousel-embla-basic__image"
          src="/snippets/card-sample-01.jpg"
          alt=""
          width="640"
          height="360"
          decoding="async"
        />
      </div>
    </div>
  </div>
</div>

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

/* Embla Carousel と Auto Scroll プラグインを CDN から読み込んでください（HTML 内 script 参照）。 */

/* 初期化 JS（script.js）は CDN 読み込みより後に配置してください。 */

/* --carousel-slide-size でスライド幅を変更できます。 */

/* --carousel-gap でスライド間隔を変更できます。 */

/* --carousel-radius で角丸を変更できます。 */

/* --carousel-scroll-speed で流れる速さ（px / frame）を変更できます。 */

/* reset */
:where(.carousel-embla-basic) {
  box-sizing: border-box;
}

:where(img).carousel-embla-basic__image {
  display: block;
}

/* snippet */
.carousel-embla-basic {
  --carousel-slide-size: min(72%, 480px);
  --carousel-gap: 16px;
  --carousel-radius: 16px;
  --carousel-scroll-speed: 0.5;

  width: 100%;
  margin-inline: auto;
}

.carousel-embla-basic__viewport {
  overflow: hidden;
}

.carousel-embla-basic__container {
  display: flex;
  margin-left: calc(var(--carousel-gap) * -1);
}

.carousel-embla-basic__slide {
  flex: 0 0 var(--carousel-slide-size);
  min-width: 0;
  padding-left: var(--carousel-gap);
}

.carousel-embla-basic__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--carousel-radius);
}

(function () {
  function init() {
    if (typeof EmblaCarousel === "undefined") return;

    const reducedMotion = window.matchMedia(
      "(prefers-reduced-motion: reduce)",
    ).matches;

    document.querySelectorAll(".js-carousel-embla-basic").forEach((root) => {
      if (root.dataset.carouselEmblaBasicInit) return;
      root.dataset.carouselEmblaBasicInit = "true";

      const viewport = root.querySelector(".carousel-embla-basic__viewport");
      const container = root.querySelector(".carousel-embla-basic__container");
      if (!viewport || !container) return;

      const originalSlides = Array.from(
        container.querySelectorAll(".carousel-embla-basic__slide"),
      );
      if (!originalSlides.length) return;

      const speedValue = getComputedStyle(root)
        .getPropertyValue("--carousel-scroll-speed")
        .trim();
      const speed = parseFloat(speedValue);

      const plugins = [];
      if (!reducedMotion && typeof EmblaCarouselAutoScroll !== "undefined") {
        plugins.push(
          EmblaCarouselAutoScroll({
            direction: "forward",
            speed: Number.isFinite(speed) ? speed : 1,
            startDelay: 0,
            stopOnInteraction: false,
            stopOnMouseEnter: false,
            playOnInit: true,
          }),
        );
      }

      const emblaApi = EmblaCarousel(
        viewport,
        { loop: true, align: "start", watchDrag: false },
        plugins,
      );

      const MAX_DUPLICATE_ROUNDS = 12;

      function canLoop() {
        return Boolean(emblaApi.internalEngine()?.slideLooper?.canLoop());
      }

      function appendOriginalSlides() {
        originalSlides.forEach((slide) => {
          const clone = slide.cloneNode(true);
          clone.setAttribute("data-carousel-clone", "");
          clone.setAttribute("aria-hidden", "true");
          container.appendChild(clone);
        });
      }

      function ensureLoop() {
        let rounds = 0;
        while (!canLoop() && rounds < MAX_DUPLICATE_ROUNDS) {
          appendOriginalSlides();
          emblaApi.reInit();
          rounds += 1;
        }

        if (!reducedMotion && rounds > 0) {
          emblaApi.plugins()?.autoScroll?.play();
        }
      }

      ensureLoop();
      emblaApi.on("resize", ensureLoop);
    });
  }

  if (typeof EmblaCarousel !== "undefined") {
    init();
    return;
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init, { once: true });
  } else {
    init();
  }
})();

プレビューを読み込み中

<div class="carousel-embla-vertical js-carousel-embla-vertical">
  <div class="carousel-embla-vertical__viewport">
    <div class="carousel-embla-vertical__container">
      <div class="carousel-embla-vertical__slide">
        <img
          class="carousel-embla-vertical__image"
          src="/snippets/card-sample-01.jpg"
          alt=""
          width="640"
          height="360"
          decoding="async"
        />
      </div>
      <div class="carousel-embla-vertical__slide">
        <img
          class="carousel-embla-vertical__image"
          src="/snippets/card-sample-01.jpg"
          alt=""
          width="640"
          height="360"
          decoding="async"
        />
      </div>
      <div class="carousel-embla-vertical__slide">
        <img
          class="carousel-embla-vertical__image"
          src="/snippets/card-sample-01.jpg"
          alt=""
          width="640"
          height="360"
          decoding="async"
        />
      </div>
      <div class="carousel-embla-vertical__slide">
        <img
          class="carousel-embla-vertical__image"
          src="/snippets/card-sample-01.jpg"
          alt=""
          width="640"
          height="360"
          decoding="async"
        />
      </div>
      <div class="carousel-embla-vertical__slide">
        <img
          class="carousel-embla-vertical__image"
          src="/snippets/card-sample-01.jpg"
          alt=""
          width="640"
          height="360"
          decoding="async"
        />
      </div>
    </div>
  </div>
</div>

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

/* Embla Carousel と Auto Scroll プラグインを CDN から読み込んでください（HTML 内 script 参照）。 */

/* 初期化 JS（script.js）は CDN 読み込みより後に配置してください。 */

/* --carousel-viewport-height で表示領域の高さを変更できます。 */

/* --carousel-slide-size でスライド高さを変更できます。 */

/* --carousel-gap でスライド間隔を変更できます。 */

/* --carousel-radius で角丸を変更できます。 */

/* --carousel-scroll-speed で流れる速さ（px / frame）を変更できます。 */

/* reset */
:where(.carousel-embla-vertical) {
  box-sizing: border-box;
}

:where(img).carousel-embla-vertical__image {
  display: block;
}

/* snippet */
.carousel-embla-vertical {
  --carousel-viewport-height: 360px;
  --carousel-slide-size: 72%;
  --carousel-gap: 16px;
  --carousel-radius: 16px;
  --carousel-scroll-speed: 0.5;

  width: 100%;
  max-width: 480px;
  margin-inline: auto;
}

.carousel-embla-vertical__viewport {
  height: var(--carousel-viewport-height);
  overflow: hidden;
}

.carousel-embla-vertical__container {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-top: calc(var(--carousel-gap) * -1);
}

.carousel-embla-vertical__slide {
  flex: 0 0 var(--carousel-slide-size);
  min-height: 0;
  padding-top: var(--carousel-gap);
}

.carousel-embla-vertical__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--carousel-radius);
}

(function () {
  function init() {
    if (typeof EmblaCarousel === "undefined") return;

    const reducedMotion = window.matchMedia(
      "(prefers-reduced-motion: reduce)",
    ).matches;

    document.querySelectorAll(".js-carousel-embla-vertical").forEach((root) => {
      if (root.dataset.carouselEmblaVerticalInit) return;
      root.dataset.carouselEmblaVerticalInit = "true";

      const viewport = root.querySelector(".carousel-embla-vertical__viewport");
      const container = root.querySelector(
        ".carousel-embla-vertical__container",
      );
      if (!viewport || !container) return;

      const originalSlides = Array.from(
        container.querySelectorAll(".carousel-embla-vertical__slide"),
      );
      if (!originalSlides.length) return;

      const speedValue = getComputedStyle(root)
        .getPropertyValue("--carousel-scroll-speed")
        .trim();
      const speed = parseFloat(speedValue);

      const plugins = [];
      if (!reducedMotion && typeof EmblaCarouselAutoScroll !== "undefined") {
        plugins.push(
          EmblaCarouselAutoScroll({
            direction: "forward",
            speed: Number.isFinite(speed) ? speed : 1,
            startDelay: 0,
            stopOnInteraction: false,
            stopOnMouseEnter: false,
            playOnInit: true,
          }),
        );
      }

      const emblaApi = EmblaCarousel(
        viewport,
        { axis: "y", loop: true, align: "start", watchDrag: false },
        plugins,
      );

      const MAX_DUPLICATE_ROUNDS = 12;

      function canLoop() {
        return Boolean(emblaApi.internalEngine()?.slideLooper?.canLoop());
      }

      function appendOriginalSlides() {
        originalSlides.forEach((slide) => {
          const clone = slide.cloneNode(true);
          clone.setAttribute("data-carousel-clone", "");
          clone.setAttribute("aria-hidden", "true");
          container.appendChild(clone);
        });
      }

      function ensureLoop() {
        let rounds = 0;
        while (!canLoop() && rounds < MAX_DUPLICATE_ROUNDS) {
          appendOriginalSlides();
          emblaApi.reInit();
          rounds += 1;
        }

        if (!reducedMotion && rounds > 0) {
          emblaApi.plugins()?.autoScroll?.play();
        }
      }

      ensureLoop();
      emblaApi.on("resize", ensureLoop);
    });
  }

  if (typeof EmblaCarousel !== "undefined") {
    init();
    return;
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init, { once: true });
  } else {
    init();
  }
})();

Carousel embla card

Embla Carousel（CDN）でカードをスライド表示。左下に矢印、右下にドットページネーション。

2023年12月以降、すべてのブラウザーで利用可能です。

Baseline: BaselineWidely available

対応ブラウザ: Chrome120+Edge120+Firefox117+Safari17.2+

使用機能: CSS Nesting calc(infinity)Media range syntaxaspect-ratio :where():focus-visible min() / max()prefers-reduced-motion place-items object-fit any-hover gapgridflex

プレビューを読み込み中

<div
  class="carousel-embla-card js-carousel-embla-card"
  aria-roledescription="carousel"
  aria-label="カードカルーセル"
>
  <div class="carousel-embla-card__viewport">
    <div class="carousel-embla-card__container">
      <div class="carousel-embla-card__slide">
        <div class="card-image-text">
          <div class="card-image-text__media">
            <img
              class="card-image-text__image"
              src="/snippets/card-sample-01.jpg"
              alt=""
              width="640"
              height="360"
              decoding="async"
            />
          </div>
          <div class="card-image-text__body">
            <h3 class="card-image-text__title">タイトル 1</h3>
            <p class="card-image-text__text">
              ここに説明テキストが入ります。<br />ここに説明テキストが入ります。
            </p>
            <a class="card-image-text__button" href="#">詳しく見る</a>
          </div>
        </div>
      </div>
      <div class="carousel-embla-card__slide">
        <div class="card-image-text">
          <div class="card-image-text__media">
            <img
              class="card-image-text__image"
              src="/snippets/card-sample-01.jpg"
              alt=""
              width="640"
              height="360"
              decoding="async"
            />
          </div>
          <div class="card-image-text__body">
            <h3 class="card-image-text__title">タイトル 2</h3>
            <p class="card-image-text__text">
              ここに説明テキストが入ります。<br />ここに説明テキストが入ります。
            </p>
            <a class="card-image-text__button" href="#">詳しく見る</a>
          </div>
        </div>
      </div>
      <div class="carousel-embla-card__slide">
        <div class="card-image-text">
          <div class="card-image-text__media">
            <img
              class="card-image-text__image"
              src="/snippets/card-sample-01.jpg"
              alt=""
              width="640"
              height="360"
              decoding="async"
            />
          </div>
          <div class="card-image-text__body">
            <h3 class="card-image-text__title">タイトル 3</h3>
            <p class="card-image-text__text">
              ここに説明テキストが入ります。<br />ここに説明テキストが入ります。
            </p>
            <a class="card-image-text__button" href="#">詳しく見る</a>
          </div>
        </div>
      </div>
      <div class="carousel-embla-card__slide">
        <div class="card-image-text">
          <div class="card-image-text__media">
            <img
              class="card-image-text__image"
              src="/snippets/card-sample-01.jpg"
              alt=""
              width="640"
              height="360"
              decoding="async"
            />
          </div>
          <div class="card-image-text__body">
            <h3 class="card-image-text__title">タイトル 4</h3>
            <p class="card-image-text__text">
              ここに説明テキストが入ります。<br />ここに説明テキストが入ります。
            </p>
            <a class="card-image-text__button" href="#">詳しく見る</a>
          </div>
        </div>
      </div>
      <div class="carousel-embla-card__slide">
        <div class="card-image-text">
          <div class="card-image-text__media">
            <img
              class="card-image-text__image"
              src="/snippets/card-sample-01.jpg"
              alt=""
              width="640"
              height="360"
              decoding="async"
            />
          </div>
          <div class="card-image-text__body">
            <h3 class="card-image-text__title">タイトル 5</h3>
            <p class="card-image-text__text">
              ここに説明テキストが入ります。<br />ここに説明テキストが入ります。
            </p>
            <a class="card-image-text__button" href="#">詳しく見る</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="carousel-embla-card__footer">
    <div class="carousel-embla-card__arrows">
      <button
        class="carousel-embla-card__arrow carousel-embla-card__arrow--prev"
        type="button"
        aria-label="前のスライド"
      >
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path
            d="M14 6L8.70711 11.2929C8.31658 11.6834 8.31658 12.3166 8.70711 12.7071L14 18"
          />
        </svg>
      </button>
      <button
        class="carousel-embla-card__arrow carousel-embla-card__arrow--next"
        type="button"
        aria-label="次のスライド"
      >
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path
            d="M10 6L15.2929 11.2929C15.6834 11.6834 15.6834 12.3166 15.2929 12.7071L10 18"
          />
        </svg>
      </button>
    </div>
    <div
      class="carousel-embla-card__pagination"
      aria-label="スライドのページネーション"
    ></div>
  </div>
</div>

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

/* Embla Carousel を CDN から読み込んでください（HTML 内 script 参照）。 */

/* 初期化 JS（script.js）は CDN 読み込みより後に配置してください。 */

/* --carousel-slide-size でスライド幅を変更できます。 */

/* --carousel-gap でスライド間隔を変更できます。 */

/* reset */
:where(.carousel-embla-card),
:where(.card-image-text) {
  box-sizing: border-box;
}

:where(h3).card-image-text__title,
:where(p).card-image-text__text {
  margin: 0;
  font: inherit;
}

:where(img).card-image-text__image {
  display: block;
}

:where(a, button).card-image-text__button {
  box-sizing: border-box;
  font: inherit;
  text-decoration: none;
  appearance: none;
  cursor: pointer;
  border: none;
}

:where(button).carousel-embla-card__arrow,
:where(button).carousel-embla-card__dot {
  box-sizing: border-box;
  padding: 0;
  font: inherit;
  appearance: none;
  cursor: pointer;
  background: none;
  border: none;
}

/* card-image-text */
.card-image-text {
  --card-background: #fff;
  --card-border: #e7e7e7;
  --card-title-color: #364153;
  --card-text-color: #5e6775;
  --card-button-background: #2b36f5;
  --card-button-background-hover: #1f28a8;
  --card-button-color: #fff;
  --card-focus-color: #2b36f5;

  display: grid;
  width: 100%;
  overflow: hidden;
  background-color: var(--card-background);
  border: 1px solid var(--card-border);
  border-radius: 12px;
}

.card-image-text__media {
  aspect-ratio: 16 / 9;
}

.card-image-text__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-image-text__body {
  padding: 24px;
}

.card-image-text__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--card-title-color);
}

.card-image-text__text {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--card-text-color);
}

.card-image-text__button {
  display: inline-grid;
  place-items: center;
  width: 100%;
  padding: 12px 24px;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--card-button-color);
  background-color: var(--card-button-background);
  border-radius: calc(infinity * 1px);

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--card-focus-color);
    outline-offset: 2px;
  }

  @media (any-hover: hover) {
    transition: background-color 0.3s;

    &:hover {
      background-color: var(--card-button-background-hover);
    }
  }
}

/* carousel */
.carousel-embla-card {
  --carousel-slide-size: min(85%, 320px);
  --carousel-gap: 16px;
  --carousel-control-size: 40px;
  --carousel-control-border: #e7e7e7;
  --carousel-control-background: #fff;
  --carousel-control-background-hover: #f5f6f8;
  --carousel-control-color: #364153;
  --carousel-control-accent: #2b36f5;
  --carousel-control-focus-color: #2b36f5;
  --carousel-dot-size: 8px;
  --carousel-dot-color: #c8c4bc;
  --carousel-dot-color-selected: #2b36f5;
  --carousel-duration: 0.2s;
  --carousel-easing: ease;

  width: 100%;

  @media (width >= 640px) {
    --carousel-slide-size: calc((100% - var(--carousel-gap)) / 2);
  }

  @media (width >= 960px) {
    --carousel-slide-size: calc((100% - 2 * var(--carousel-gap)) / 3);
  }
}

.carousel-embla-card__viewport {
  overflow: hidden;
}

.carousel-embla-card__container {
  display: flex;
  margin-left: calc(var(--carousel-gap) * -1);
}

.carousel-embla-card__slide {
  flex: 0 0 var(--carousel-slide-size);
  min-width: 0;
  padding-left: var(--carousel-gap);
}

.carousel-embla-card__slide > .card-image-text {
  grid-template-rows: auto 1fr;
  height: 100%;

  & .card-image-text__body {
    display: flex;
    flex-direction: column;
  }

  & .card-image-text__text {
    flex: 1;
  }
}

.carousel-embla-card__footer {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
}

.carousel-embla-card__arrows {
  display: flex;
  gap: 4px;
  align-items: center;
}

.carousel-embla-card__arrow {
  display: grid;
  place-items: center;
  width: var(--carousel-control-size);
  height: var(--carousel-control-size);
  color: var(--carousel-control-color);
  background-color: var(--carousel-control-background);
  border: 1px solid var(--carousel-control-border);
  border-radius: 8px;

  svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentcolor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--carousel-control-focus-color);
    outline-offset: 2px;
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.4;
  }

  @media (any-hover: hover) {
    transition:
      color var(--carousel-duration) var(--carousel-easing),
      background-color var(--carousel-duration) var(--carousel-easing),
      border-color var(--carousel-duration) var(--carousel-easing);

    &:not(:disabled):hover {
      color: var(--carousel-control-accent);
      background-color: var(--carousel-control-background-hover);
      border-color: var(--carousel-control-accent);
    }
  }
}

.carousel-embla-card__pagination {
  display: flex;
  gap: 8px;
  align-items: center;
}

.carousel-embla-card__dot {
  width: var(--carousel-dot-size);
  height: var(--carousel-dot-size);
  background-color: var(--carousel-dot-color);
  border-radius: 50%;

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--carousel-control-focus-color);
    outline-offset: 2px;
  }

  @media (any-hover: hover) {
    transition: background-color var(--carousel-duration) var(--carousel-easing);

    &:hover {
      background-color: var(--carousel-dot-color-selected);
    }
  }
}

.carousel-embla-card__dot--selected {
  background-color: var(--carousel-dot-color-selected);
}

@media (prefers-reduced-motion: reduce) {
  .carousel-embla-card__arrow,
  .carousel-embla-card__dot {
    transition: none;
  }
}

(function () {
  function init() {
    if (typeof EmblaCarousel === "undefined") return;

    document.querySelectorAll(".js-carousel-embla-card").forEach((root) => {
      if (root.dataset.carouselEmblaCardInit) return;
      root.dataset.carouselEmblaCardInit = "true";

      const viewport = root.querySelector(".carousel-embla-card__viewport");
      const prevButton = root.querySelector(
        ".carousel-embla-card__arrow--prev",
      );
      const nextButton = root.querySelector(
        ".carousel-embla-card__arrow--next",
      );
      const paginationNode = root.querySelector(
        ".carousel-embla-card__pagination",
      );
      if (!viewport || !prevButton || !nextButton || !paginationNode) return;

      const emblaApi = EmblaCarousel(viewport, {
        align: "start",
        containScroll: "trimSnaps",
      });

      const dots = [];

      function createDots() {
        paginationNode.replaceChildren();
        dots.length = 0;

        emblaApi.scrollSnapList().forEach((_, index) => {
          const dot = document.createElement("button");
          dot.type = "button";
          dot.className = "carousel-embla-card__dot";
          dot.setAttribute("aria-label", `${index + 1} 枚目のスライドへ`);
          dot.addEventListener("click", () => emblaApi.scrollTo(index));
          paginationNode.appendChild(dot);
          dots.push(dot);
        });
      }

      function updateControls() {
        prevButton.disabled = !emblaApi.canScrollPrev();
        nextButton.disabled = !emblaApi.canScrollNext();

        const selectedIndex = emblaApi.selectedScrollSnap();
        dots.forEach((dot, index) => {
          const isSelected = index === selectedIndex;
          dot.classList.toggle(
            "carousel-embla-card__dot--selected",
            isSelected,
          );
          dot.setAttribute("aria-current", isSelected ? "true" : "false");
        });
      }

      prevButton.addEventListener("click", () => emblaApi.scrollPrev());
      nextButton.addEventListener("click", () => emblaApi.scrollNext());

      createDots();
      updateControls();

      emblaApi.on("select", updateControls);
      emblaApi.on("reInit", () => {
        createDots();
        updateControls();
        window.dispatchEvent(new Event("resize"));
      });

      window.dispatchEvent(new Event("resize"));
    });
  }

  if (typeof EmblaCarousel !== "undefined") {
    init();
    return;
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init, { once: true });
  } else {
    init();
  }
})();

Carousel

Carousel embla basic

Carousel embla vertical

Carousel embla card