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

Аватар пользователя LLC VelvetDev

Решили написать статью по настройке слайдера для начинающих знакомиться с Друпал в продолжение темы 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 КБ
Модули и темы:
Тип материала:
Версия Drupal:
0 Thanks

Комментарии

Аватар пользователя fairrandir
fairrandir 10 месяцев назад

Заморочено, плохо отформатировано, ошибки/опечатки.

Аватар пользователя ХулиGUN
ХулиGUN 10 месяцев назад

А в чём прикол? В накликивании, чтобы вся эта лабуда хранилась в БД?
И какой реальный кейс использования Media, почему не нода, блок, вьюха?

Аватар пользователя gun_dose
gun_dose 10 месяцев назад

Деревня ты! Это ж восьмёрка - один раз накликал, экспортнул конфу и в дальнейшем эти слайдеры за одну секунду делаются.

Аватар пользователя sas@drupal.org
sas@drupal.org 10 месяцев назад

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

Аватар пользователя ХулиGUN
ХулиGUN 10 месяцев назад
gun_dose написал:
Деревня ты! Это ж восьмёрка - один раз накликал, экспортнул конфу и в дальнейшем эти слайдеры за одну секунду делаются.

Ну так я и не говорю, что я спец в друпале))) Но я реально не понимаю профита. Если это статическая страница, то проще в самом шаблоне вывести массив фоток и потом инициализировать js плагин. Если зто какой нить динамический контент(например нода), то гораздо удобнее обыкновенная кнопка редактора, которая соберёт нужную конструкцию., если внутри боди и так же обыкновенная правка шаблона, если это поля))) Остальных реальных кейсов я не вижу, либо это просто подгон ТЗ под возможности исполнителя

Аватар пользователя gun_dose
gun_dose 10 месяцев назад

Отчасти ты прав. Я бывал в кабинах двух вертолётов. Так там кнопок значительно меньше, чем в настройках слика. Именно поэтому я подключаю слик так, как ты написал)))