Views Slideshow довольно интересный модуль (и достаточно популярный), одно время незаслуженно мной забытый, поскольку другие модули для слайдеров предлагали обычно адаптивность из коробки. Но в одном из проектов не хотелось дополнительно тянуть модуль Slick плюс его дополнения (Slick Extras, Slick Views). Да и валидация иногда не такая "красивая" с данным модулем.
И так модуль Views Slideshow устанавливаем как обычно с помощью composer и добавляем библиотеки в файл composer.json :
composer require drupal/views_slideshow
"repositories": [
{
"type": "package",
"package": {
"name": "malsup/cycle",
"type": "drupal-library",
"version": "3.0.3",
"source": {
"url": "https://github.com/malsup/cycle",
"type": "git",
"reference": "3.0.3-a",
"no-api": true
}
}
},
{
"type": "package",
"package": {
"name": "briancherne/jquery-hoverintent",
"type": "drupal-library",
"version": "1.10.1",
"source": {
"url": "https://github.com/briancherne/jquery-hoverintent",
"type": "git",
"reference": "v1.10.1",
"no-api": true
}
}
}
],Включаем в админке данный модуль и идем в раздел js темы. Если нет своего файла custom.js, создаем его, подключаем как обычно в your_theme.libraries.yml. У меня как правило такой файл всегда есть, поскольку не использую стандартные модули Drupal - кнопка вверх (опять же из-за проблем с валидацией).
Основная проблема Views Slideshow это то, что слайдер не подстраивался мгновенно под размер экрана, "подвисал" в прошлом размере ширины. Далее просто привожу код, который надо добавить в файл JS вашей темы, чтобы этой проблемы не стало.
;(function($){
// Response slideshow
$(window).resize(function() {
var div_height = $('.views_slideshow_cycle_slide').height();
$('.views_slideshow_cycle_teaser_section').height(div_height);
});
})(jQuery);По коду особо объяснять я не вижу смысла, но если в двух словах - отслеживаем изменение ширины окна и устанавливаем высоту блока с классом "views_slideshow_cycle_teaser_section" равной высоте блока с классом "views_slideshow_cycle_slide".
