4.5.5.1. Подключаем jQuery OwlCarousel к Drupal 8 Views
В прошлой статье мы сделали слайдшоу с помощью Views Slideshow. Но у нас остался незастилизованный пагинатор с маленькими картинками.
В этой статье мы разберем как добавить OwlCarousel и добавить CSS с помощью дополнительной библиотеки. В приложение к статье приложены файлы модуля:
https://drupalbook.org/sites/default/files/inline-images/drupalbook_owlcarousel.zip
В этой статье мы используем кастомный модуль для подключения OwlCarousel, но в следующий раз мы будет стилизовать слайдшоу в файлах темы офомления.
Как создать slideshow вы можете посмотреть в предыщем видео:
4.5.5. Views slideshow - вывод jQuery-слайдшоу и каруселей через Views
В результате добавления кастомного модуля у нас получится вот такое слайдшоу:
Сначала нужно создать папку нашего модуля в папке всех модулей:
/modules/custom
Дальше создаем файл информации о модуле
/modules/custom/drupalbook_owlcarousel/drupalbook_owlcarousel.info.yml
name: Drupalbook OwlCarousel
description: Adds styles to Views pager
type: module
core: 8.x
package: Drupalbook
Подробнее о разработке модулей на Drupal 8 мы разберем позже, сейчас мы просто разберем как добавить библиотеку в кастомный модуль.
name - Произвольное имя для нашего модуля
description - произвольное описание нашего модуля
type - здесь мы указываем тип module/theme в зависимости от того что мы создаем тему или модуль
core - указываем для какой версии друпала модуль
package - группируем модули функциональности
Теперь мы уже можем включить наш модуль. Но для начала давайте добавим библиотеку OwlCarousel, cайт плагина jQuery OwlCarousel:
https://owlcarousel2.github.io/OwlCarousel2/
Я положил библиотеку OwlCarousel сюда:
\modules\custom\drupalbook_owlcarousel\js\owlcarousel
Также я добавил кастомный файл javascript, в котором мы будем инициализировать библиотеку OwlCarousel
\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 для этого общего div'a, это нужно чтобы применились стандартные стили OwlCarousel. Также обратите внимание, что в дополнительном массиве опций responsive, мы може указать отдельно разное количество элементов на слайде для каждого из разрешений экрана от 0 до 600 пикселей 3 элемента, от 600 до 1000 пикселей 4 элемента, от 1000 пикселей и выше 5 элементов. Размеры картинок при этом будут автоматически подгонятся самим плагином OwlCarousel.
О том как работать с jQuery в 8ом друпале:
https://drupalbook.org/ru/drupal/88-rabota-s-javascriptjquery-v-drupal-8-chto-takoe-behaviors
Также я подключил дополнительный 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 8:
Создание библиотек для 8го друпала:
Для этого я создал файл
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
В зависимостях нужно указать jQuery, на случай если это будет единственная библиотека, которая требует jQuery. Также мы должны подключить CSS/JS библиотеки OwlCarousel: owl.carousel.css, owl.theme.default.min.css, owl.carousel.min.js
Наши CSS/JS drupalbook_owlcarousel.css, drupalbook_owlcarousel.js мы подключаем после файлов OwlCarousel, чтобы можно было использовать библиотеку в javascript и переопределить если будет нужно CSS стили.
Теперь чтобы наша библиотека подключилась нужно включить модуль drupalbook_owlcarousel. А также добавить еще один файл с подключение библиотеки:
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';
}
}
Имя view мы указыем в условии if, а в название библиотеки мы сначала указываем имя модуля где находится библиотека drupalbook_owlcarousel, а потом через косую черту указываем название библиотеки из файла drupalbook_owlcarousel.libraries.yml. Для удобства я назвал библиотеку также как и наш модуль, но в одном модуле может быть несколько библиотек и не всегда имя библиотеки совпадает с именем модуля.
Теперь чистим кеш и наши стили и javascript должны применится. Возможно у вас другие названия селекторов и вам нужно будет поменять CSS/JS файлы. Если у вас что-то не получается то пишите в комментариях, будем разбираться.