I-008 Interaction medium

How to create a image carousel 画像カルーセルの作り方

Basic image slider with manual navigation controls. スワイプやボタンで画像を切り替える基本的なスライダー。

carousel slider gallery image

ライブデモ Live Demo

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

Basic image slider with manual navigation controls.

スワイプやボタンで画像を切り替える基本的なスライダー。

どこで使うかWhere to use

user engagement, data entry, content management, settings panel

商品画像カルーセル、ヒーローバナー、お客様の声、メディアギャラリー

特徴Key features

CSS Scroll Snap carousel with smooth snap-to-slide behavior. Touch/swipe enabled natively. Keyboard arrow key navigation. Dot indicator syncs with scroll position. Autoplay with pause-on-hover. No layout library dependencies.

CSS Scroll Snapによるスムーズなスナップトゥスライドカルーセル。ネイティブでタッチ/スワイプ対応。キーボード矢印キーナビゲーション。スクロール位置と同期するドットインジケーター。ホバーで一時停止するオートプレイ。レイアウトライブラリ依存なし。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
--transition-duration—Slide transition speed

実装コード Implementation Code 

// react/I-008.jsx
import { useState } from 'react';
import './I-008.css';

export default function Carousel({ images = [] }) {
  const [current, setCurrent] = useState(0);

  const next = () => setCurrent((prev) => (prev + 1) % images.length);
  const prev = () => setCurrent((prev) => (prev - 1 + images.length) % images.length);

  return (
    <div className="carousel">
      <div className="carousel-track" style={{ transform: `translateX(-${current * 100}%)` }}>
        {images.map((src, i) => (
          <div key={i} className="carousel-slide">
            <img src={src} alt="" />
          </div>
        ))}
      </div>
      <button className="carousel-btn prev" onClick={prev}>❮</button>
      <button className="carousel-btn next" onClick={next}>❯</button>
    </div>
  );
}
/* react/I-008.css */
/* I-008: React styles */
.carousel {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #000;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  height: 100%;
}

.carousel-slide {
  min-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

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

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 10;
}

.carousel-btn:hover {
  background: rgba(255, 255, 255, 0.4);
}

.carousel-btn.prev {
  left: 16px;
}

.carousel-btn.next {
  right: 16px;
}
import { useState } from 'react';
import './I-008.css';

export default function Carousel({ images = [] }) {
  const [current, setCurrent] = useState(0);

  const next = () => setCurrent((prev) => (prev + 1) % images.length);
  const prev = () => setCurrent((prev) => (prev - 1 + images.length) % images.length);

  return (
    <div className="carousel">
      <div className="carousel-track" style={{ transform: `translateX(-${current * 100}%)` }}>
        {images.map((src, i) => (
          <div key={i} className="carousel-slide">
            <img src={src} alt="" />
          </div>
        ))}
      </div>
      <button className="carousel-btn prev" onClick={prev}>❮</button>
      <button className="carousel-btn next" onClick={next}>❯</button>
    </div>
  );
}
/* I-008: React styles */
.carousel {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #000;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  height: 100%;
}

.carousel-slide {
  min-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

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

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 10;
}

.carousel-btn:hover {
  background: rgba(255, 255, 255, 0.4);
}

.carousel-btn.prev {
  left: 16px;
}

.carousel-btn.next {
  right: 16px;
}

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

A scrollable container uses overflow-x: scroll with scroll-snap-type: x mandatory. Each slide has scroll-snap-align: start. JavaScript watches the scroll event to update the active dot indicator and handle the autoplay timer. Prev/Next buttons use scrollBy() to advance slides programmatically.

スクロール可能なコンテナはoverflow-x:scrollとscroll-snap-type:x mandatoryを使用。各スライドはscroll-snap-align:startを持ちます。JavaScriptがscrollイベントを監視してアクティブドットインジケーターを更新しオートプレイタイマーを処理。前/次ボタンがscrollBy()でプログラム的にスライドを進めます。

カスタマイズ方法Customization

Change scroll-snap-type: y mandatory for a vertical carousel. Set scroll-snap-align: center to center-snap slides. Remove dots and add a progress bar instead. Adjust the autoplay interval duration or disable it entirely.

scroll-snap-type:y mandatoryで縦カルーセルに変更。scroll-snap-align:centerでスライドをセンタースナップ。ドットを削除してプログレスバーに置き換え。オートプレイの間隔を調整または完全に無効化。

注意点Caveats

Add aria-live="polite" and announce slide changes so screen readers track progress. Provide visible prev/next buttons as well as dot indicators — dots alone are too small a click target for motor-impaired users. Always allow autoplay to be paused.

aria-live="polite"を追加してスライド変更をアナウンスし、スクリーンリーダーが進行状況を把握できるようにしてください。ドットインジケーターだけでなく可視の前/次ボタンを提供してください — ドットのみでは運動障害のあるユーザーにクリックターゲットが小さすぎます。常にオートプレイを一時停止できるようにしてください。

よくある質問 Frequently Asked Questions

How to customize the image carousel? Image Carouselをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the image carousel in React? ReactでImage Carouselを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of image carousel? Image Carouselのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

AIへの指示テンプレート AI Prompt Template

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.