Темизация Slick Carousel - пишем красивый слайдер.

Главные вкладки

Аватар пользователя LLC VelvetDev LLC VelvetDev 11 января 2018 в 13:59
1

Решили написать статью по настройке слайдера для начинающих знакомиться с Друпал в продолжение темы Media Entity и Slick Carousel, так как информации, в особенности на русском, крайне мало.
Наша задача - сделать вот такой слайдер средствами предоставленными Drupal, и в частности модулем Slick Carousel.
img01
Думаю, у вас уже установлен этот модуль, если нет - вот ссылка :
https://www.drupal.org/project/slick
Так как мы работаем с Media ставим Slick Media :
https://www.drupal.org/project/slick_media

Иногда возникают проблемы с библиотекой JS ,как у нас в данном случае, проверьте консоль. Если проблема все же возникла, то идём по пути modules/contrib/slick/ , там лежит файл slick.libraries.yml в котором указано, где должна находиться библиотека и где ее скачать.

img02
Установку и работу модулей серии Media Entity мы разбирали в предыдущей статье.
Итак: что же представляет из себя наш слайдер? По факту -- это 2 синхронизированных слайдера. По этой причине мы сначала создадим 2 optionset для каждого из наших слайдеров.
Переходим по пути /admin/config/media/slick или по меню Configuration -> Media -> Slick
img03

У нас пока нет сетов, поэтому в строке с Default нажимаем на Duplicate (дабы не накликивать базовые настройки). И приступаем к созданию первого сета.
img04
Первым мы создадим слайдер, который будет выводить несколько слайдов для нижней части (у нас 5). Назовем его Small Image Slider
(Изменяем поле Label). Это изображение дефолтных настроек.
img05
Полный список можете посмотреть тут: github.com.... Остановимся лишь на тех настройках, которые нам необходимо изменить. Это изображение настроек, которые уже произведены.
img

  • Slides to show - количество слайдов, которые мы хотим видеть на дисплее.
  • Center mode - выводимый слайд будет находиться по центру.
  • Swipe to slide - дает возможность перетягивать слайды мышкой(можно не включать).

По аналогу создаем сет второго слайдера. Он выводит большое изображение. Назовем его Big Image Slider, вот его настройки:
Big Image Slider

  • Adaptive height - адаптирует изображение по высоте.
  • Arrows - (выключили) стрелки для перелистывания слайдов.
  • Fade - эффект растворения(картинка исчезает и появляется новая (а не перелистывается).
  • Enable mousewheel - прокрутка слайдов колесиком на мышке.

Мы создали 2 сета и выглядит это вот так:
imag
Далее переходим на страницу создания Media bundles /admin/structure/media или через меню Structure -> Media bundles.
Создаем новый bundle типа Slideshow (процесс создания описан в предыдущей статье). Наш назовем Beautiful Media Slideshow.
Поле для Media назвали Beautiful Slide. Изменяем его FORMAT
в Manage display на Slick Media. Запоминаем это место - мы сюда
еще вернемся.

Создаем новый Media с нашим новым Media bundle и наполняем его контентом (этот процесс также описан в предыдущей статье).
img
После тог, как мы нажмем на “Save and publish” нас перебросит на страницу Media. Но наш слайдер выглядит довольно убого, поэтому продолжаем настройки.
image
Переходим в то место которое я просил запомнить
/admin/structure/media/manage/beautiful_media_slideshow/display
или по меню Structure -> Media bundles -> Beautiful Media Slideshow -> Manage display и нажимаем на шестеренку напротив нашей стоки Beautiful Slide.
im
Нажав на шестеренку, у нас откроется окно с настройками.
images
Здесь также опишем только те поля, которые использовали.
images
Здесь у нас 3 основных зоны настроек. В первой зоне (верхней левой) мы указываем настройки для нашего основного слайдера.
В ней мы указываем: в поле Optionset main - имя нашего слайдера отвечающего за вывод большого изображения, в нашем случае Big image Slider. Следующие поля первой зоны достаточно условны, но лучше их выставить.
Во второй зоне (верхней правой) в поле Skin thumbnail - ставим Thumbnail: asNavFor. Это означает что у основного слайдера будет референс(ссылка на другой слайдер). В Optionset thumbnail - ставим наш слайдер для маленьких изображений. Thumbnail лучше выставить.
Третья зона (нижняя). В поле View Mode ставим Slick carousel. Поле Aspect ratio - отвечает за пропорции вывода изображений, ставим любой (кроме None) , мне нравиться fluid. Сохраняем(Update/Save). Переходим на страницу нашего медиа, обновляем (мы делали настройки в другом окне) - все готово!
image
Удачи в разработке на Drupal.

ВложениеРазмер
Иконка изображения image1.png777.69 КБ
Иконка изображения image9.png185.98 КБ
Иконка изображения image7.png80.13 КБ
Иконка изображения image5.png163.75 КБ
Иконка изображения image8.png91.67 КБ
Иконка изображения image15.png103.06 КБ
Иконка изображения image14.png98.78 КБ
Иконка изображения image6.png155.92 КБ
Иконка изображения image3.png95.86 КБ
Иконка изображения image12.png709.59 КБ
Иконка изображения image10.png101.68 КБ
Иконка изображения image2.png79.54 КБ
Иконка изображения image4.png96.88 КБ
Иконка изображения image11.png786.89 КБ

Комментарии

Аватар пользователя sas@drupal.org sas@drupal.org 13 января 2018 в 7:27

Старался человек писал, скажем ему спасибо, хорошо бы было не только имаджи заюзать в примере для медиа. Модуль media в коробке умолчательно скрыт, используется по требованию, посмотрим как он дальше будет дышать.

Аватар пользователя Enemy Enemy 15 июня 2019 в 17:51

Норм гайд, по аналогии сделал для филда слайдерку. Только не ставьте Fade - затемнение эффект, как тут написано. Глючит основной слайд.

Аватар пользователя dpetrovskaya dpetrovskaya 6 февраля 2020 в 14:39

Дорогой автор!
Спасибо вам ОГРОМНОЕ!!

Зарегистрировалась лишь только для того, чтобы написать вам тут благодарность!
Kiss 2

Очень, очень помогли!
Пример отличный и описание толковое. Хотя у меня и семерка (обошлась без media).
Очень мало информации на русском про slick, а опытным путем замучилась красоту наводить.
Еще раз спасибо!