syncfusion-javascript-carousel

Syncfusion Carousel の実装

Carousel コンポーネントを使用すると、画像やコンテンツ、リンクなどのメディアをスライドショー形式で表示できます。画像ギャラリーの作成、コンテンツのローテーション表示、注目アイテムの表示、インタラクティブなメディアプレゼンテーションに最適です。

主な機能

• 複数アイテムのレンダリング - 配列またはデータソースからアイテムを表示
• アニメーション効果 - スライド、フェード、またはカスタムアニメーションによるスムーズな切り替え
• ナビゲーションコントロール - 表示モードを設定できる前へ／次へボタン
• インジケーター - 数値、ドット、動的、またはプログレスインジケーターでスライド位置を表示
• 自動再生 - 間隔を設定できる自動スライド切り替え
• キーボードサポート - キーボードによる完全なナビゲーションをサポート
• アクセシビリティ - 支援技術に対応した WAI-ARIA 準拠
• タッチ／マウススワイプ - タッチデバイスでジェスチャーによるナビゲーション
• テンプレートサポート - アイテムやボタン用のカスタム HTML テンプレート
• レスポンシブ対応 - さまざまな画面サイズや部分表示モードに適応

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• インストールと依存関係
• npm によるパッケージのセットアップ
• CSS のインポートとテーマ設定
• 基本的な Carousel の初期化
• HTML と TypeScript を使用した最初に動作する例

Carousel アイテムの追加

📄 参照： references/populating-items.md

• アイテム配列の作成とデータ追加
• 個々のアイテムのテンプレート構文
• データソースのバインド方法
• 動的なアイテムのレンダリング
• アイテムごとの設定
• パフォーマンス向上のための WebP 画像形式の最適化

アニメーションとトランジション

📄 参照： references/animations-and-transitions.md

• アニメーション効果の種類（スライド、フェード、なし、カスタム）
• アニメーションのタイミング設定
• 必要に応じてアニメーションを無効化
• アニメーションの例とパターン
• パフォーマンスに関する考慮事項

ナビゲーターとインジケーター

📄 参照： references/navigators-and-indicators.md

• ナビゲーションボタンの表示モード（非表示、表示、ホバー時に表示）
• インジケーターの種類（デフォルト、動的、分数、プログレス）
• 自動再生と間隔の設定
• 再生／一時停止ボタンの制御
• 手動でのスライドナビゲーション
• ループと方向の設定

スタイルと外観

📄 参照： references/styling-and-appearance.md

• CSS クラスの構造とカスタマイズ
• インジケーターのスタイルと外観
• ナビゲーションボタンのカスタマイズ
• Theme Studio との統合
• カスタムテーマの作成
• レスポンシブデザインのパターン

API リファレンス

📄 参照： references/api-reference.md

• 型とデフォルト値を含むプロパティの完全なリファレンス
• Carousel の制御とナビゲーション用の 12 のメソッド
• イベント処理（slideChanged、slideChanging）
• 型定義と列挙型
• アイテムモデルとデータ構造

クイックスタートの例

import { Carousel } from "@syncfusion/ej2-navigations";

// Create carousel with basic items
const carouselObj = new Carousel({
  items: [
    { template: '<img src="image1.jpg" alt="Image 1" style="height:100%;width:100%;" />' },
    { template: '<img src="image2.jpg" alt="Image 2" style="height:100%;width:100%;" />' },
    { template: '<img src="image3.jpg" alt="Image 3" style="height:100%;width:100%;" />' }
  ],
  animationEffect: "Slide",
  autoPlay: true,
  interval: 3000,
  buttonsVisibility: "Visible"
});

// Append to DOM
carouselObj.appendTo("#carousel");

よく使われるパターン

自動再生付き画像ギャラリー

const carousel = new Carousel({
  items: galleryImages,
  autoPlay: true,
  interval: 4000,
  pauseOnHover: true,
  animationEffect: "Fade"
});
carousel.appendTo("#gallery");

手動ナビゲーションのみ

const carousel = new Carousel({
  items: slides,
  autoPlay: false,
  buttonsVisibility: "Visible",
  indicatorsType: "Numeric"
});
carousel.appendTo("#slides");

イベント処理付き

const carousel = new Carousel({
  items: items,
  autoPlay: true
});

carousel.addEventListener('slideChanged', (args) => {
  console.log(`Slide changed to: ${args.currentIndex}`);
});

carousel.addEventListener('slideChanging', (args) => {
  if (args.nextIndex === 5) {
    args.cancel = true; // Prevent navigation to slide 5
  }
});

carousel.appendTo("#carousel");

レスポンシブな部分表示

const carousel = new Carousel({
  items: items,
  partialVisible: true,
  width: "100%",
  height: "auto",
  animationEffect: "Slide"
});
carousel.appendTo("#container");

主なプロパティ

プロパティ	型	用途
items	CarouselItemModel[]	表示するカルーセル項目の配列
autoPlay	boolean	スライドの自動切り替えを有効にします
interval	number	自動再生時にスライドが切り替わる間隔（ミリ秒）
animationEffect	CarouselAnimationEffect	スライド切り替え時のアニメーションの種類
buttonsVisibility	CarouselButtonVisibility	ナビゲーションボタンの表示／非表示
indicatorsType	CarouselIndicatorsType	位置インジケーターのスタイル
showIndicators	boolean	インジケーターのドット／番号を表示します
showPlayButton	boolean	再生／一時停止ボタンを表示します
pauseOnHover	boolean	ホバー時に自動再生を一時停止します
enableTouchSwipe	boolean	タッチスワイプ操作を有効にします
allowKeyboardInteraction	boolean	キーボード操作によるナビゲーションを有効にします
loop	boolean	最後のスライドの後、最初から再生します
partialVisible	boolean	前後のスライドを一部表示します
height	string | number	ピクセルまたはパーセンテージで指定するカルーセルの高さ
width	string | number	ピクセルまたはパーセンテージで指定するカルーセルの幅

よくある使用例

画像ギャラリー

• サムネイル付きフォトアルバム
• 複数の画像を使った商品紹介
• 注目アイテムのカルーセル

ニュース／コンテンツの切り替え

• 見出しの切り替え表示
• 注目記事のカルーセル
• お客様の声の切り替え表示

メディアのプレゼンテーション

• スライドショービューアー
• ポートフォリオのプレゼンテーション
• 動画サムネイルのカルーセル

Eコマース

• 商品画像ギャラリー
• 注目商品セクション
• カテゴリー紹介

ランディングページ

• ヒーロー画像の切り替え
• 注目セクションのカルーセル
• プロモーションバナー

---

次のステップ

1. 「はじめに」から始める - 最初のカルーセルを設定します
2. 方法を選ぶ - 項目の配列またはデータソースへのバインド
3. アニメーションを設定する - 切り替え効果を選択します
4. ナビゲーションを追加する - ボタンとインジケーターを設定します
5. スタイルをカスタマイズする - テーマと CSS を適用します
6. イベントを処理する - スライドの変更に応答します
7. API リファレンスを確認する - メソッドを使ってプログラムから制御します

実装パターンの詳細や高度な機能については、上記の該当するリファレンスガイドを参照してください。