インストール
composer require 'drupal/slick_extras:^2.0'
概要
Slick ExtrasはSlickカルーセルモジュールのコンパニオンモジュールで、追加のビジュアルスキン、サンプル設定、開発ユーティリティを提供します。このモジュールは、開発者がSlickの効果的な使用方法を学ぶのを支援し、カルーセル用のすぐに使えるビジュアルテーマを提供するように設計されています。
メインモジュールは、3Dエフェクト、ボックスレイアウト、角丸画像、垂直タブナビゲーションなど、カスタムCSSスタイリングを含む6つの追加カルーセルスキンを提供します。2つのサブモジュールが含まれています：Slickライブラリのデバッグとテスト用のSlick Development、および複数のoptionset、画像スタイル、Viewsブロックを含む包括的なサンプル設定を提供するSlick Exampleです。
このモジュールは主に学習と開発目的を意図しています。サンプル設定は、asNavFor（サムネイルナビゲーション）、カルーセル、フルスクリーンスライドショー、グリッドレイアウト、スプリットビューなど、さまざまなSlickカルーセルパターンを示しています。
Features
- 6つの追加カルーセルスキン：3D back、Boxed、Box carousel、Box split、Rounded、VTabsで、カスタムCSSアニメーションとレイアウトを含む
- Slickライブラリのminified版とunminified版を切り替えてデバッグするためのオプションを持つ開発サブモジュール
- 異なるカルーセルパターン（Main、Carousel、Fullscreen、Grid、Overlay、Split、Slick for、Slick nav、VTabs）を示す9つの事前設定されたoptionsetを持つサンプルサブモジュール
- asNavForマルチバリュー、asNavForシングル、asNavForスプリット、カルーセル、フルスクリーン、グリッド、メイン設定を紹介する7つのビルド済みViewsブロック
- Slickカルーセル用に最適化された6つの画像スタイル（slick、slick_fullscreen、slick_lighbox、slick_rectangle、slick_square、slick_thumbnail）
- 簡単なカスタマイズのためにSlickSkinPluginBaseを拡張するプラグインベースのスキンアーキテクチャ
- ブレークポイント固有の設定を持つレスポンシブoptionset設定
Use Cases
Slickカルーセル実装の学習
Slick Exampleサブモジュールを使用して、Slickカルーセルの設定方法を理解します。必要な画像フィールドを作成後にサブモジュールをインストールし、/admin/config/media/slickの事前設定されたoptionsetと/admin/structure/viewsのViewsを調べてください。これらの設定をクローンして独自のカスタムカルーセルを作成できます。
3Dカルーセルエフェクトの適用
Slick Extrasモジュールを有効にし、Slick表示を設定する際に'X 3d back'スキンを選択します。このスキンは焦点が後ろにある3Dパースペクティブエフェクトを追加し、centerModeを有効にして3つのslidesToShowで最適に動作します。隣接するスライドはCSS 3Dトランスフォームで外側に回転します。
マージン付きボックスカルーセルの作成
スライド周りにマージンとパディングが必要なカルーセルには'X Boxed'または'X Box carousel'スキンを使用します。これらのスキンは側面に矢印を表示し、ボーダーとホバーエフェクト付きのカードのようなスタイリングを追加します。各アイテムに視覚的な区切りが必要な商品やコンテンツカルーセルに最適です。
垂直サムネイルナビゲーションの構築
メインカルーセル用の垂直タブのようなサムネイルナビゲーションを作成するには'X VTabs'スキンを適用します。これにより、垂直スクロールするサムネイル付きのサイドパネルが作成され、永続的なサムネイルナビゲーションが必要な商品ギャラリーやポートフォリオに最適です。
Slickカルーセルの問題のデバッグ
Slick Developmentサブモジュールを有効にし、/admin/config/media/slick/develで設定します。「開発モードを有効にする」をトグルして非圧縮のSlickライブラリコードを使用するか、「slick.load.jsを開発版に置き換える」を使用してコンソールログとビューポートデバッグ情報でDrupal統合レイヤーをデバッグします。
asNavFor同期カルーセルの作成
Slick Exampleが提供するx_slick_forとx_slick_nav optionsetを調べてください。これらは、1つのカルーセルでサムネイルをクリックするとメインカルーセルがナビゲートする同期カルーセルの作成方法を示しています。Viewsブロック'Block: asNavFor Multi-value field'、'Block: asNavFor Single'、'Block: asNavFor Split'は異なる実装パターンを示しています。
Tips
- サンプルを直接オーバーライドしないでください。代わりにクローンして、変更を失わずに後でモジュールを更新できるようにしてください。Views UIクローンとSlick optionsetクローン機能を使用してください。
- ゼロから再作成しないでください - 代わりにクローンしてください。多くのステップとオプションは完全にドキュメント化されておらず、経験豊富なViewsユーザーでもクローンすることで大幅に時間を節約できます。
- 本番環境ではSlick Exampleモジュールをアンインストールしてください。実際の機能はなくサンプルとしてのみ機能します。ただし、アンインストールを忘れても安全です。
- Slick設定の開発作業中は常にキャッシュを無効にしてください。そうしないと変更が表示されない場合があります。
- グリッドレイアウトの場合、Viewsの結果の総数が表示スライド設定より大きいことを確認してください。そうしないとグリッドが壊れて表示される場合があります。
- Gridスキンを使用する場合、slidesToShow、Rows、slidesPerRowを1に設定し、モジュールがCSS Foundation b-gridを通じてグリッドを処理するようにしてください。
Technical Details
Admin Pages 1
/admin/config/media/slick/devel
Slickカルーセルの開発およびデバッグオプションを設定します。このページでは、開発者がテストおよびデバッグ目的でSlickライブラリの本番版と開発版を切り替えることができます。
Hooks 2
hook_library_info_alter
slick_develモジュールによって実装され、開発設定に基づいてSlickライブラリ定義を変更し、minified版とunminified版の切り替えを可能にします。
hook_help
slick_exampleモジュールによって実装され、モジュールのヘルプページにREADME.mdの内容を表示します。
Troubleshooting 4
Slick Exampleサブモジュールをインストールする前に、少なくとも1つのコンテンツタイプに画像フィールド'field_image'（単一値）と'field_images'（複数値/無制限）が存在することを確認してください。これらのフィールドはViews設定に必要です。
field_imagesフィールドに画像付きのコンテンツがあることを確認してください。Devel generateモジュールを使用してテストコンテンツを生成してください。Slick X: Viewsブロックを広いリージョンに配置し、/admin/structure/views/view/slick_x/editでViewsフィルター設定を確認してください。
スキンは永続的にキャッシュされます。このモジュールまたは他のモジュールから新しく追加されたスキンを表示するには、/admin/config/development/performanceですべてのキャッシュをクリアするか、drush crを使用してください。
サンプルViewsにはキャプションとしてBodyテキストが含まれています。BodyテキストにHTMLが含まれている場合、不正に切り取られてレイアウトの問題が発生する可能性があります。ViewsフィールドがHTMLを適切に処理するように設定を調整するか、表示からBodyテキストフィールドを削除してください。