Alpine.js を使用して単純なカルーセルを作成するステップバイステップの例を次に示します。 Alpine.js は、反応性を提供する軽量の JavaScript フレームワークで、大量の JavaScript を使用せずにインタラクティブなコンポーネントを構築するために使用できます。
この例では、画像を一度に 1 つずつ表示し、画像間を移動するための「前へ」と「次へ」ボタンを備えた基本的なカルーセルを作成します。始めましょう!
ステップ 1: HTML をセットアップし、Alpine.js を含める
まず、HTML ファイルの先頭に Alpine.js をインクルードします。これを行うには、次のスクリプト タグを追加します:
Alpine.js Carousel
ステップ 2: カルーセル コンポーネントの構造
本文内で、カルーセル コンポーネントの div を作成し、それを x-data で初期化して、Alpine.js のプロパティとメソッドを定義します。
Previous
Next
ステップ 3: Alpine.js データとメソッドを定義する
次に、Alpine コンポーネントでカルーセル機能を定義し、画像をナビゲートするための初期データとメソッドを設定します。
コンポーネントの説明
カルーセル HTML 構造 :
前ボタン : クリックすると、 prev メソッドを呼び出して前の画像に移動します。
画像 : x-for を使用して画像をループし、src 属性をバインドします。 :class バインディングは、アクティブなクラスを現在のイメージに適用し、表示できるようにします。
次へボタン : クリックすると、next メソッドを呼び出して次の画像に移動します。
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 プロジェクトにスターを付けてください ⭐️
ソースコード
