Slick Carousel
Ken Wheeler製のSlick Carouselライブラリを活用した、高機能なスライドショー/カルーセルソリューションを提供するDrupalモジュール。
slick
インストール
composer require 'drupal/slick:^3.0'
概要
Slick Carouselモジュールは、広く使用されているKen Wheeler製のSlick Carouselライブラリ（およびAccessible 360のAccessible Slickフォーク版）をDrupalに統合する強力なモジュールです。
このモジュールは、完全にレスポンシブなスライドショーとカルーセルを構築するための包括的なツールセットを提供します。CSS3トランジション、スワイプ操作、マウスドラッグ、キーボードナビゲーションなど、モダンなユーザー体験を実現する機能を備えています。
フィールドフォーマッター、Views統合、ショートコードフィルターなど、複数の方法でSlickカルーセルをコンテンツに組み込むことができます。また、スキンシステムにより、カスタムCSSを使用したさまざまなレイアウトバリエーションを簡単に実装できます。
Blazyモジュールとの統合により、遅延読み込み、レスポンシブ画像、ライトボックス連携など、高度なメディア処理機能も利用可能です。
Features
- 完全レスポンシブ設計 - コンテナサイズに合わせてスケール、CSS3トランジションを優先使用
- タッチ/スワイプ対応 - モバイルデバイスでのスワイプ操作とデスクトップでのマウスドラッグをサポート
- アクセシビリティ機能 - 矢印キーナビゲーション、ARIA属性サポート、Accessible Slickライブラリ対応
- asNavFor機能 - メインスライダーとサムネイルナビゲーションの同期機能
- 豊富なオプションセット管理 - UI上でJavaScriptオプションを完全にカスタマイズ可能
- スキンシステム - Default、Classic、Fullscreen、Fullwidth、Split、Gridなど複数のビルトインスキン
- フィールドフォーマッター対応 - Image、Media、Text、Entity Referenceフィールドに対応
- 遅延読み込み（Lazyload） - Blazyモジュール連携による高度な遅延読み込み
- グリッドカルーセル - 複数行/列のグリッドレイアウトカルーセル
- ショートコードフィルター - WYSIWYG内でSlickカルーセルを作成可能
- ネストスライダー - スライド内にスライダーを配置するオーバーレイ機能
- ライトボックス連携 - Colorbox、Photobox、PhotoSwipeとの統合
- レスポンシブブレークポイント設定 - 最大9つのブレークポイントで表示を制御
- モジュール式アーキテクチャ - プラグイン形式でスキンやフォーマッターを拡張可能
Use Cases
画像ギャラリーカルーセル
複数値の画像フィールドをカルーセルとして表示。コンテンツタイプの「表示管理」で画像フィールドのフォーマッターを「Slick Image」に設定。オプションセット、スキン、サムネイルナビゲーションなどを設定することで、プロフェッショナルな画像ギャラリーを構築できます。
メディアスライドショー（asNavFor）
メインスライダーとサムネイルナビゲーションを同期させたギャラリー。optionset_thumbnailを設定することで、サムネイルクリックでメインスライダーを制御するYouTube風のプレイリストUIを実現。thumbnail_positionオプションでサムネイルの配置（左、右、上、オーバーレイ）を指定可能。
ヒーロースライダー
ページ上部の全幅ヒーローセクション。Skin「Fullwidth」または「Fullscreen」を使用し、slidesToShow: 1、fade: true、autoplay: trueを設定。キャプションオーバーレイで見出しとCTAボタンを配置。
商品カルーセル
ECサイトの商品一覧表示。slidesToShow: 4、slidesToScroll: 1で複数商品を同時表示。レスポンシブブレークポイントでモバイルでは1-2商品表示に調整。Skin「Grid」でグリッドベースのレイアウト。
テキストティッカー/ニュースフィード
Slick Textフォーマッターを使用したテキストコンテンツのスライドショー。autoplay: true、vertical: trueで縦方向にスクロールするニュースティッカーを実現。
コンテンツエディター内でのショートコード使用
Slickフィルターを有効化し、WYSIWYG内で[slick data="node:44:field_media" /]のようなショートコードを使用。PHPやTwigにアクセスできない状況でもカルーセルを挿入可能。
Viewsベースのスライダー
slick_viewsモジュールを使用し、Viewsスタイルプラグインとしてカルーセルを構築。任意のコンテンツをスライドとして表示可能。複雑なコンテンツ構成やフィルタリングが必要な場合に有効。
Tips
- パフォーマンス最適化: オプションセット編集画面で「Optimized」オプションを有効にし、デフォルト値を保存しないようにする
- 画像スタイルに「crop」エフェクトを使用し、一貫した画像サイズを確保する
- 本番環境ではSlick UIサブモジュールをアンインストールしてメモリを節約
- slick-theme.cssに含まれるフォントが不要な場合は/admin/config/media/slick/uiで無効化
- Drupalキャッシュとアセットアグリゲーションを有効にしてパフォーマンスを向上
- Blazyの遅延読み込み機能を活用し、初期ページロードを高速化
- asNavForを使用する場合、メインとサムネイルのオプションセットを別々に作成し、GroupでMainとThumbnailに分類すると管理しやすい
- カスタムスキンを作成する場合はslick.api.phpを参照し、プラグインとして実装
Technical Details
Admin Pages 3
/admin/config/media/slick
Slickオプションセットの一覧表示と管理。オプションセットはJavaScriptオプションの設定の集合で、カルーセルの動作をカスタマイズできます。
/admin/config/media/slick/add
新しいSlickオプションセットを作成。カルーセルのあらゆるJavaScriptオプションを設定できます。
/admin/config/media/slick/ui
Slickモジュールのグローバル設定を管理。使用するライブラリの選択やCSS設定を行います。
権限 1
Hooks 7
hook_slick_overridable_options_info_alter
管理UIで上書き可能なオプションを変更するフック。フォーマッターやViews UIで表示されるチェックボックスオプションをカスタマイズできます。
hook_slick_optionset_alter
Slickオプションセットをプリプロセスやテンプレートに渡す前に変更するフック。
hook_slick_options_alter
SlickのJavaScriptオプションを直接変更するフック。hook_slick_optionset_alterの代替。
hook_slick_settings_alter
SlickのHTML/レイアウト設定を変更するフック。フォーマッターやViewsからの設定をカスタマイズできます。
hook_slick_skin_info_alter
スキン定義を変更するフック。
hook_slick_attach_alter
Slickのアタッチメント（ライブラリ、設定）を変更するフック。
hook_slick_build_alter
Slickのビルド配列全体を変更するフック。
Troubleshooting 8
スキンとライトボックスは永続的にキャッシュされます。/admin/config/development/performanceでキャッシュをクリアしてください。
オプションセットを再保存し、キャッシュをクリアしてください。JS/CSSアグリゲーションを使用している場合は再生成が必要です。
Slickライブラリのバージョン問題の可能性があります。package.jsonのバージョンとslick.min.js内のバージョンが一致していることを確認。バージョン1.6.0が最も安定しています。1.8.1以降は既知の問題があります。
Infiniteオプションがクローンスライドを作成するためです。Infiniteオプションを無効化するか、Colorboxの場合はモジュールが提供する修正が適用されます。
Slick管理CSSが一部のカスタム/contrib管理テーマと互換性がない場合があります。/admin/config/media/blazyでadmin_cssを無効化してください。
Layout Builder UI内ではdraggableオプションが自動的に無効化されます（UIソート機能との競合回避）。
メインとサムネイルの両方でInfiniteオプションが有効な場合、両方とも同じ設定にしてください。スライド数がslidesToShowより少ない場合、同期に問題が生じることがあります。
FadeはslidesToShow: 1の場合のみ正しく動作します。複数スライド表示と組み合わせないでください。
Security Notes 2
- 「administer slick」権限は「restrict access」フラグが設定されており、信頼できる管理者のみに付与すべきです。オプションセットではカスタムHTMLマークアップ（矢印など）を入力できるため、XSSリスクがあります。
- Slickフィルターを使用する場合、信頼できるテキストフォーマットでのみ有効化してください。ショートコード属性からHTML/JSを注入される可能性があります。