3.5.5.1. jQuery OwlCarousel を Drupal Views に組み込む
前の記事では、Views Slideshow を使ってスライドショーを作りました。しかし、まだ小さな画像付きのスタイリングされていないページネーターがあります。
この記事では、OwlCarousel を追加し、追加のライブラリを使って CSS を追加する方法を見ていきます。
この記事では、OwlCarousel を接続するためにカスタムモジュールを使いますが、次回はテーマのファイルでスライドショーをスタイリングします。
https://drupalbook.org/sites/default/files/inline-images/drupalbook_owlcarousel.zip
スライドショーの作成方法は前の記事で読めます:
3.5.5. Views slideshow - Views を通じて jQuery のスライドショーとカルーセルを出力する。
カスタムモジュールを追加した結果、次のスライドショーが得られます:
まず、すべてのモジュールのフォルダーに私たちのモジュールのフォルダーを作成する必要があります:
/modules/custom
次に、モジュール情報ファイルを作成します
/modules/custom/drupalbook_owlcarousel/drupalbook_owlcarousel.info.yml
Drupal 8.8 以下の場合:
name: Drupalbook OwlCarousel
description: Adds styles to Views pager
type: module
core: 8.x
package: Drupalbook
Drupal 8.8+ の場合
name: Drupalbook OwlCarousel
description: Adds styles to Views pager
type: module
core_version_requirement: ^8 || ^9
package: Drupalbook
Drupal のモジュール開発については後で詳しく説明します。今は、カスタムモジュールにライブラリを追加する方法を単純に分析します。
name - 私たちのモジュールの任意の名前
description - 私たちのモジュールの任意の説明
type - ここでは、テーマとモジュールのどちらを作成しているかに応じて、モジュール/テーマのタイプを示します
core - どのバージョンの drupal 用のモジュールかを示します
package - 機能モジュールをグループ化します
これで、私たちのモジュールを有効にできます。しかしまず、OwlCarousel ライブラリ、jQuery OwlCarousel プラグインのサイトを追加しましょう:
https://owlcarousel2.github.io/OwlCarousel2/
OwlCarousel ライブラリをここに置きました:
\modules\custom\drupalbook_owlcarousel\js\owlcarousel
また、OwlCarousel ライブラリを初期化するカスタム javascript ファイルも追加しました
\modules\custom\drupalbook_owlcarousel\js\drupalbook_owlcarousel.js
(function ($) {
Drupal.behaviors.drupalBookOwlCarousel = {
attach: function (context, settings) {
$('.view-slideshow #widget_pager_bottom_slideshow-block_1').owlCarousel({
items: 5,
margin: 5,
nav:true,
responsiveClass:true,
responsive:{
0: {
items: 3
},
600:{
items: 4
},
1000:{
items: 5
}
}
});
$('.view-slideshow #widget_pager_bottom_slideshow-block_1').addClass('owl-carousel');
}
};
})(jQuery);
OwlCarousel は、個々の画像を包む共通のタグに接続されます。また、この共通の div に owl-carousel クラスを追加しました。標準の OwlCarousel スタイルを適用するために必要です。また、responsive オプションの追加配列で、0 から 600 ピクセルの画面解像度には 3 要素、600 から 1000 ピクセルには 4 要素、1000 ピクセル以上には 5 要素、というように、各画面解像度ごとにスライド上の要素数を個別に指定できることに注意してください。画像サイズは OwlCarousel プラグイン自体によって自動的に変更されます。
また、追加の CSS ファイルも組み込みました。その中にスライドショー用のスタイルを書きます。
\modules\custom\drupalbook_owlcarousel\css\drupalbook_owlcarousel.css
.view-slideshow #widget_pager_bottom_slideshow-block_1 {
max-width: 480px;
position: relative;
}
.view-slideshow #widget_pager_bottom_slideshow-block_1 .owl-prev {
position: absolute;
left: 5px;
top: 30px;
opacity: 0.7;
background: url(../images/little-left.png) center center no-repeat;
width: 32px;
padding-top: 32px;
height: 0;
overflow: hidden;
display: block;
text-decoration: none;
border: 0;
}
.view-slideshow #widget_pager_bottom_slideshow-block_1 .owl-prev:hover {
opacity: 1;
}
.view-slideshow #widget_pager_bottom_slideshow-block_1 .owl-next {
position: absolute;
right: 5px;
top: 30px;
opacity: 0.7;
background: url(../images/little-right.png) center center no-repeat;
width: 32px;
padding-top: 32px;
height: 0;
overflow: hidden;
display: block;
text-decoration: none;
border: 0;
}
.view-slideshow #widget_pager_bottom_slideshow-block_1 .owl-next:hover {
opacity: 1;
}
.view-slideshow .views-slideshow-controls-bottom {
max-width: 480px;
}
.views_slideshow_pager_field_item.active img {
border: 1px solid #0000ff;
}
.views_slideshow_controls_text_pause {
display: none;
}
.view-slideshow .view-content {
position: relative;
max-width: 480px;
}
#views_slideshow_controls_text_previous_slideshow-block_1 {
position: absolute;
top: 155px;
left: 10px;
z-index: 99;
}
#views_slideshow_controls_text_previous_slideshow-block_1 a {
background: url(../images/left.png) center center no-repeat;
width: 42px;
padding-top: 42px;
height: 0;
overflow: hidden;
display: block;
text-decoration: none;
border: 0;
}
#views_slideshow_controls_text_next_slideshow-block_1 {
position: absolute;
top: 155px;
right: 10px;
z-index: 99;
}
#views_slideshow_controls_text_next_slideshow-block_1 a {
background: url(../images/right.png) center center no-repeat;
width: 42px;
padding-top: 42px;
height: 0;
overflow: hidden;
display: block;
text-decoration: none;
border: 0;
}
そして今、これらすべてを Drupal のライブラリとして接続する必要があります:
Drupal 用のライブラリの作成:
そのために、ファイル modules\custom\drupalbook_owlcarousel\drupalbook_owlcarousel.libraries.yml を作成しました
drupalbook_owlcarousel:
css:
theme:
js/owlcarousel/assets/owl.carousel.css: {}
js/owlcarousel/assets/owl.theme.default.min.css: {}
css/drupalbook_owlcarousel.css: {}
js:
js/owlcarousel/owl.carousel.min.js: {}
js/drupalbook_owlcarousel.js: {}
dependencies:
- core/jquery
dependencies には、これが jQuery を必要とする唯一のライブラリの場合に備えて、jQuery を指定する必要があります。また、OwlCarousel の CSS/JS ライブラリ:owl.carousel.css、owl.theme.default.min.css、owl.carousel.min.js を組み込む必要があります。
javascript でライブラリを使い、CSS スタイルが必要なら再定義できるように、私たちの CSS/JS drupalbook_owlcarousel.css、drupalbook_owlcarousel.js を OwlCarousel ファイルの後に接続します。
次に、私たちのライブラリが接続されるように、drupalbook_owlcarousel モジュールを有効にする必要があります。そして、ライブラリ接続を含むもう 1 つのファイルも追加します:
modules\custom\drupalbook_owlcarousel\drupalbook_owlcarousel.module
/**
* hook_preprocess_views_view().
*/
function drupalbook_owlcarousel_preprocess_views_view(&$variables) {
if ($variables['view']->storage->id() == 'slideshow') {
$variables['#attached']['library'][] = 'drupalbook_owlcarousel/drupalbook_owlcarousel';
}
}
if でビューの名前を指定し、ライブラリの名前では、まず drupalbook_owlcarousel ライブラリがあるモジュールの名前を示し、次にスラッシュを通じて drupalbook_owlcarousel.libraries.yml ファイルからライブラリの名前を指定します。便宜上、私はライブラリを私たちのモジュールと同じ名前にしましたが、1 つのモジュールには複数のライブラリがあり得て、ライブラリ名がモジュールの名前と常に一致するわけではありません。
次に、キャッシュをクリアすると、私たちのスタイルと javascript が適用されるはずです。おそらくセレクターの名前が異なり、CSS / JS ファイルを変更する必要があるでしょう。何かうまくいかない場合は、コメントに書いてください。一緒に解決します。