Alpine.js を使用して単純なカルーセルを作成するステップバイステップの例を次に示します。 Alpine.js は、反応性を提供する軽量の JavaScript フレームワークで、大量の JavaScript を使用せずにインタラクティブなコンポーネントを構築するために使用できます。

この例では、画像を一度に 1 つずつ表示し、画像間を移動するための「前へ」と「次へ」ボタンを備えた基本的なカルーセルを作成します。始めましょう!

ステップ 1: HTML をセットアップし、Alpine.js を含める

まず、HTML ファイルの先頭に Alpine.js をインクルードします。これを行うには、次のスクリプト タグを追加します:

ステップ 2: カルーセル コンポーネントの構造

本文内で、カルーセル コンポーネントの div を作成し、それを x-data で初期化して、Alpine.js のプロパティとメソッドを定義します。

  
  Previous

  
  

  
  Next

ステップ 3: Alpine.js データとメソッドを定義する

次に、Alpine コンポーネントでカルーセル機能を定義し、画像をナビゲートするための初期データとメソッドを設定します。

コンポーネントの説明

1. カルーセル HTML 構造:

   • 前ボタン: クリックすると、 prev メソッドを呼び出して前の画像に移動します。
   • 画像: x-for を使用して画像をループし、src 属性をバインドします。 :class バインディングは、アクティブなクラスを現在のイメージに適用し、表示できるようにします。
   • 次へボタン: クリックすると、next メソッドを呼び出して次の画像に移動します。

2. Alpine.js データとメソッド:

   • currentIndex: 表示されている現在の画像を追跡します。
   • images: カルーセルの画像の URL を含む配列。
   • startAutoPlay() および stopAutoPlay(): 3 秒間隔で自動再生を開始および停止します。
   • next(): currentIndex をインクリメントします。画像枚数を超えると最初に戻ります。
   • prev(): currentIndex をデクリメントします。ゼロを下回ると、最後の画像に戻ります。
   • init(): カルーセルが初期化されるときに自動再生を開始します。

ステップ 4: カルーセルのスタイルを設定する

カルーセルとボタンの位置と可視性のために基本的な CSS スタイルを追加しました。 CSS トランジションにより、画像にフェードイン効果が与えられます。

ステップ 5: 自動再生とクリック可能なコントロール

• 自動再生: init() の startAutoPlay() を使用して自動再生します。
• クリック コントロール: ボタンは prev() 関数と next() 関数をトリガーしてスライドを移動します。

まとめ

• Alpine.js はインタラクティブ性に使用され、カルーセルを軽量かつ応答性に優れています。
• CSS トランジションは、画像の変化に応じてフェード効果を作成します。
• ボタンをクリックすると Alpine メソッドがトリガーされ、ナビゲーションが簡単になります。

この例では、自動再生機能とクリック可能なコントロールの両方を提供し、カルーセルをインタラクティブにします。さらにカスタマイズや追加機能が必要な場合はお知らせください。

@ LinkedIn に連絡して、私のポートフォリオをチェックしてください。

私の GitHub プロジェクトにスターを付けてください ⭐️

ソースコード