В прошлой статье мы сделали слайдшоу с помощью Views Slideshow. Но у нас остался незастилизованный пагинатор с маленькими картинками.
Видео:
https://www.youtube.com/watch?v=EtnHgqAUYT4
В этой статье мы разберем как добавить OwlCarousel и добавить CSS с помощью дополнительной библиотеки. В приложение к статье приложены файлы модуля:
http://drupalbook.ru/sites/default/files/drupalbook_owlcarousel.zip
В этой статье мы используем кастомный модуль для подключения OwlCarousel, но в следующий раз мы будет стилизовать слайдшоу в файлах темы офомления.
Как создать slideshow вы можете посмотреть в предыщем видео:
4.5.5. Views slideshow - вывод jQuery-слайдшоу и каруселей через Views
В результате добавления кастомного модуля у нас получится вот такое слайдшоу:
Сначала нужно создать папку нашего модуля в папке всех модулей:
/modules/custom
Дальше создаем файл информации о модуле
/modules/custom/drupalbook_owlcarousel/drupalbook_owlcarousel.info.yml
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
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 подключается к общему
Также я подключил дополнительный CSS файл, в него мы будем писать стили для слайдшоу: стрелочки, размеры, отступы.
\modules\custom\drupalbook_owlcarousel\css\drupalbook_owlcarousel.css
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го друпала:
https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets...
Для этого я создал файл
modules\custom\drupalbook_owlcarousel\drupalbook_owlcarousel.libraries.yml
В зависимостях нужно указать 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 файлы. Если у вас что-то не получается то пишите в комментариях, будем разбираться.
Атрибуция
Абраменко Иван
