Адаптивное слайдшоу с помощью модуля Views Slideshow Drupal 8

18-05-2020

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".

Похожие статьи