Webサイト制作で「スライダー」を設置する際、どのJavaScriptライブラリを使うか悩むことはありませんか？

受託案件などでサイト制作を依頼されると、特にトップページのメインビジュアルのスライダーに対しては、クライアントから多種多様なこだわりや要望をいただくことが多いですよね。一番目立つ場所なので、力が入るのも当然です。

しかし、多機能な既存ライブラリを使っていると、「機能としてはあるけれど、細かいレイアウトの調整が難しい」「ライブラリ特有の構造に縛られて、思い通りのデザインにできない」といった壁にぶつかることもしばしば。

そこで今回は、既存の重厚なライブラリに頼り切るのではなく、Alpine.js と Tailwind CSS を組み合わせて、自由度が高く使い勝手の良いスライダーを構築する方法をご紹介します。

なぜ Alpine.js × Tailwind CSS なのか？

今回、あえて専用のスライダーライブラリを使わない理由は、「圧倒的なカスタマイズ性」にあります。

• Alpine.js: 軽量でHTMLに直接動きを記述できるため、ロジックの把握が容易です。
• Tailwind CSS: スタイリングを自由にコントロールできるため、スライダーのボタン位置やページネーションの形など、細かなデザイン要求にも柔軟に応えられます。

なお、今回は一からすべてを作り上げるのではなく、高品質なUIコンポーネント集である「Penguin UI」のCarouselをベースに、より実用的な形へとアレンジしました。

参考リファレンス： Penguin UI - Carousel

5パターンのスライダーサンプル

今回は、実際の現場でよく使われる動きを中心に、6つのパターンのスライダーを作成しました。

それぞれの特徴を解説した概要とともに、実際に動きを確認できるサンプルページも用意しています。実装の際のヒントとして、ぜひ活用してください。

1. 通常版
2. 自動再生
3. 自動再生＋画像拡大
4. Alpine.js カード型スライダー1(自動再生なし)
5. カード型スライダー(自動再生)
6. カード型スライダー(自動再生) コンテンツ幅からはみ出たスライドを薄く

1.通常版

• スライダーの左右のナビゲーション
• スライダー下部のページネーション
• スライダーは手動で遷移

See the Pen Alpine.js スライダー1 通常版 by Toshihiro Okuda (@okuden) on CodePen.

2.自動再生

• 通常版と同じ仕様。自動で遷移する

See the Pen Alpine.js スライダーの通常版 by Toshihiro Okuda (@okuden) on CodePen.

3.自動再生＋画像拡大

• 通常版と同じ仕様。自動で遷移し画像が拡大される

See the Pen Alpine.js スライダー3(自動再生＋画像拡大) by Toshihiro Okuda (@okuden) on CodePen.

4. Alpine.js カード型スライダー1(自動再生なし)

• カード型スライダー。自動再生なし

See the Pen Alpine.js カード型スライダー1(自動再生なし) by Toshihiro Okuda (@okuden) on CodePen.

5.カード型スライダー(自動再生)

• カード型スライダー。自動で遷移する

See the Pen Alpine.js カード型スライダー1(自動再生) by Toshihiro Okuda (@okuden) on CodePen.

6.カード型スライダー(自動再生)

• カード型スライダー。自動で遷移する
• コンテンツ幅からはみ出たスライドを薄く

See the Pen Alpine.jsス カード型スライダー2(自動再生) by Toshihiro Okuda (@okuden) on CodePen.

最後に

私も今回ご紹介したスライダーを実際に使ってみる予定です。
使用していく中で、使いにくい点や困った点が出てきた場合は、随時このページに追記していきます。