Splide
軽量で強力、柔軟なバニラJavaScriptスライダーライブラリであるSplideとの統合を提供し、スライダー、カルーセル、ギャラリーを作成できます。
splide
インストール
composer require 'drupal/splide:^2.0'
概要
SplideはバニラJavaScriptスライダーライブラリSplideを統合するDrupalモジュールです。jQueryを必要とせずに、レスポンシブな画像スライダー、カルーセル、ギャラリーを作成するための強力で柔軟なソリューションを提供します。
このモジュールは、Splideインスタンスを作成する複数の方法を提供します：画像、メディア、Entity Referenceフィールド用のField Formatter、動的コンテンツ用のViewsスタイルプラグイン、WYSIWYGコンテンツにスライダーを埋め込むためのテキストフィルターがあります。テーマ設定のための包括的なスキンシステム、サムネイルナビゲーション（asNavFor）、グリッドレイアウト、画像、動画、音声を含む様々なメディアタイプをサポートしています。
SplideはBlazyモジュールを活用した遅延読み込みを行い、管理UIで作成・管理できるオプションセットを通じて広範なカスタマイズを提供します。ライブラリはループ/フェード/スライドトランジション、自動再生、マウスホイールナビゲーション、フルスクリーンモード、タッチ/スワイプジェスチャー、レスポンシブブレークポイントなどのモダンな機能をサポートしています。
Features
- Splide v4.x JavaScriptスライダーライブラリとの統合 - jQuery依存のない軽量なバニラJSソリューション
- 複数の表示モード：スライダー、カルーセル、フェード、ループトランジション
- 画像、メディア、ファイル、Entity Reference、Paragraphs、テキストフィールド用のField Formatter
- オプションのグループ化サポートを備えた動的スライダー作成用のViewsスタイルプラグイン
- ショートコードを使用してWYSIWYGコンテンツにSplideスライダーを埋め込むためのテキストフィルター
- 9種類以上の組み込みスキンを備えた包括的なスキンシステム（Default、Classic、Fullscreen、Fullwidth、Grid、Split、Seagreen、Skyblueなど）
- 縦/横配置オプションを備えたサムネイルナビゲーション（asNavFor）
- 1スライドあたり複数アイテムのためのCSS Grid Foundationによるグリッドレイアウトサポート
- カスタマイズ用の50以上のJavaScriptオプションを備えた広範なオプションセット設定
- ブレークポイントごとのオプションオーバーライドを備えたレスポンシブブレークポイント
- 再生/一時停止コントロールと進捗インジケーター付きの自動再生
- 連続スクロールカルーセル用のAutoScrollエクステンション統合
- アクセシビリティのためのマウスホイールナビゲーションサポート
- ズーム機能付きフルスクリーンモード
- Blazyモジュール統合による画像遅延読み込み
- ライトボックス統合のサポート（Colorbox、PhotoSwipe、Photobox）
- 設定可能なドラッグ動作を備えたタッチおよびスワイプジェスチャーサポート
- カスタム矢印とページネーション（ドット）スキンオプション
- キャプション配置用のレイアウトオプション（分割ビューを含む14種類のレイアウト）
- Formatter/表示レベルでのオプションセットオプションのオーバーライド
- オプションセット、オプション、添付ファイルを変更するためのフック付きプログラマティックAPI
Use Cases
サムネイル付き画像ギャラリー
メイン画像スライダーと同期したサムネイルナビゲーションを下部に作成します。メイン表示用の大きな画像用と、サムネイルナビゲーション用の2つのoptionsetを使用して設定します。フォーマッター設定で「Optionset nav」と「Skin navigation」を設定します。Navigation positionオプションを使用してサムネイルを配置します。
商品画像カルーセル
複数の商品画像を一度に3〜4アイテム表示するカルーセル形式で表示します。perPage: 3または4、type: loopで無限スクロール、矢印/ページネーションを有効にしたoptionsetを作成します。商品画像フィールドにSplide Imageフォーマッターを適用します。
お客様の声スライダー
フェードトランジション付きの自動再生お客様の声カルーセルを作成します。複数値テキストフィールドにSplide Textフォーマッターを使用するか、お客様の声コンテンツタイプ参照にSplide Entity Referenceを使用します。autoplayを有効にし、type: fadeを設定し、Splide XからX Testimonialスキンを適用します。
ヒーローバナースライドショー
テキストをオーバーレイした全幅のホームページバナー。FullwidthまたはFullscreenスキンを使用し、進行インジケーター付きの自動再生を有効にし、perPage: 1を設定し、適切なキャプションレイアウト（center、bottomなど）を選択します。ImageとMediaの両方のフォーマッターで動作します。
Lightbox付きグリッドギャラリー
Lightboxで開くグリッド形式で画像を表示します。表示アイテム数付きのGridレイアウトを有効にし、Gridスキンを適用し、Media switchをColorboxまたはPhotoSwipeに設定します。グリッドは静的または、カルーセルナビゲーション付きのページネーションにできます。
Views ベースのニューススライダー
最新のニュース記事を動的に取得するスライダー。Splide SliderフォーマットでViewを作成し、画像とタイトルのフィールドを設定し、optionsetとスキンを選択します。カテゴリベースのタブナビゲーションにはgrouping optionsetを使用します。
WYSIWYG埋め込みスライダー
コンテンツ編集者が本文テキスト内にスライダーを埋め込めるようにします。Splideテキストフィルターを有効にし、[splide data="node:5:field_gallery" /]のようなショートコードを使用して既存コンテンツの画像を埋め込むか、[splide][slide]...[/slide][/splide]でインラインHTMLスライドを使用します。
Tips
- Splide Xのサンプルoptionsetとviewsは直接修正せず、常にクローンして使用してください - 更新により変更が工場出荷時の値に戻る可能性があります
- フォーマッターの「Override main optionset」オプションを使用して、1つのoptionsetを少し変更して複数の表示に再利用できます
- 最高のパフォーマンスを得るには、本文テキストスライダーに特に必要な場合を除き、サイト全体の読み込みを無効にしてください
- アップグレード時は、常にキャッシュをクリアし、optionsetを再保存して新しいオプションを取得してください
- SplideはSplide UIなしでも動作します - optionsetの設定が完了したら、UIモジュールをアンインストールしても安全です
- Gridレイアウトとサムネイル効果を組み合わせて、カルーセルナビゲーションなしでLightboxで開く静的グリッドギャラリーを作成できます
- 動的コンテンツには、テキストフィルターのショートコードでdata属性を使用します：[splide data="node:ID:FIELD_NAME" /]
- 垂直スライダーの場合、Directionを「ttb」に設定し、.splide--navコンテナにCSS高さを指定することを忘れないでください
Technical Details
Admin Pages 3
/admin/config/media/splide
CSS オプションやサイト全体の読み込み動作を含む、グローバルな Splide 設定を構成します。このページでは、モジュールの CSS ファイルの有効化/無効化、グローバル初期化の設定、スライダー動作のプレビューが可能です。
/admin/config/media/splide/optionset
Splide オプションセットの作成、編集、管理を行います。各オプションセットは、Field フォーマッター、Views 表示、またはテキストフィルターに適用できる、スライダーの動作、外観、レスポンシブ設定の再利用可能な構成を定義します。
/admin/config/media/splide/optionset/add
スライダーのタイプ、トランジション、ナビゲーション、自動再生、ブレークポイント、詳細オプションをカスタマイズできる新しい Splide オプションセットを作成します。
権限 1
Hooks 4
hook_splide_build_alter
スライダーをレンダリングする前にSplideビルド配列を変更します。
hook_splide_optionset_alter
スライダーに適用する前にオプションセット設定を変更します。
hook_splide_skins_info
CSSおよびJSアセットを含むカスタムSplideスキンを登録します。
hook_splide_overridable_options_info_alter
フォーマッタでオーバーライド可能なオプションのリストを変更します。
Troubleshooting 8
スキンとoptionsetは永続的にキャッシュされます。/admin/config/development/performanceですべてのキャッシュをクリアするか、「drush cr」を実行して新しいアイテムを表示させます。
/admin/config/media/splideでoptionsetを再保存し、フィールド表示設定を再保存します。キャッシュをクリアし、アグリゲーションを使用している場合は集約されたJSを再生成します。
Fadeトランジションは単一スライド表示用に設計されています。fadeモードを使用する場合はperPageを1に変更するか、カルーセルの場合はslide/loopタイプに切り替えます。
loopモードはクローンスライドを作成し、それがLightboxに表示されます。Colorbox/PhotoSwipe/Photoboxを使用する場合は、typeを「loop」から「slide」または「fade」に変更します。
メインとnavの両方のoptionsetが「type: loop」を使用しているか、どちらもloopを使用していないことを確認します。すべてのoptionsetでrandomizeオプションを無効にします。optionset_navが正しく選択されていることを確認します。
autoHeightは垂直（ttb）方向と互換性がありません。垂直スライダーにはfixedHeightまたはheightRatioを代わりに使用します。
以下を確認してください：1) 総アイテム数 > visible_items、2) Gridスキンが選択されている、3) optionsetでperPageとperMoveが1に設定されている、4) 十分なコンテンツが存在する。
Splide管理CSSが一部の管理テーマと競合する場合があります。表示の問題が発生した場合は、/admin/config/media/blazyで管理CSSを無効にしてください。
Security Notes 4
- このモジュールはDrupalのセキュリティベストプラクティスに従っており、セキュリティアドバイザリの対象です
- ユーザー権限は適切に適用されます - 「administer splide」権限を持つユーザーのみがoptionsetを変更できます
- ショートコードコンテンツでのXSS攻撃を防ぐため、テキストフィルター入力はサニタイズされます
- デプロイ前に、カスタムスキンのCSS/JSを常に検証しサニタイズしてください