Два варианта создания простого слайдшоу/слайдера

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

ivnish 31 октября 2019 в 18:33
1

Я хочу рассмотреть два варианта создания простых слайдшоу/слайдеров. Статья написана для Drupal 8, но эти же модули есть и для Drupal 7.

Вариант 1: с помощью модуля Views Slideshow

1. Скачиваем и включаем views_slideshow и его подмодуль views_slideshow_cycle
2. Создаем новый тип материала (/admin/structure/types), назовем его "Слайд для слайдера"
3. Добавим к нему поля "Изображение" и "Ссылка"
4. Создадим три новых материала типа "Слайд для слайдера"

5. Создадим новое представление для слайдера (/admin/structure/views). Выбираем наш тип материала "Слайд для слайдера" и ставим галочку создать блок.

6. Добавляем к представлению поле ссылки и ставим галочки, чтобы ссылка выводилась как URL.

7. Добавляем к представлению поле изображения и включаем перезапись поля

8. В итоге имеем такое представление

9. Идем в Схему блоков (/admin/structure/block) и добавляем наш блок в нужный регион
10. Казалось бы всё, но нет. Для работы слайдшоу нужны еще javascript библиотеки. Скачать их можно по ссылкам

http://malsup.github.io/jquery.cycle.all.js
Положить в /libraries/jquery.cycle/

https://raw.githubusercontent.com/douglascrockford/JSON-js/master/json2.js
Положить в /libraries/json2/

https://raw.githubusercontent.com/briancherne/jquery-hoverIntent/master/...
Положить в /libraries/jquery.hoverIntent/

11. Готово. Если при создании слайда была указана ссылка, то при клике на слайд, мы перейдем по этой ссылке.

Вариант 2: с помощью модуля Slick

1. Скачиваем и включаем slick, Slick UI (входит в состав slick), blazy, и slick_views
2. Качаем javascript библиотеку slick и blazy

https://github.com/kenwheeler/slick/archive/v1.8.1.zip
Положить в /libraries/slick/

Полный путь до библиотеки у вас должен быть такой, это важно:
/libraries/slick/slick/slick.js

https://raw.githubusercontent.com/dinbror/blazy/master/blazy.js
Положить в /libraries/blazy/

3. Создаем новый тип материала (/admin/structure/types), назовем его "Слайд для слайдера"
4. Добавим к нему поля "Изображение" и "Ссылка"
5. Создадим три новых материала типа "Слайд для слайдера"
6. Создадим новое представление для слайдера (/admin/structure/views). Выбираем наш тип материала "Слайд для слайдера" и ставим галочку создать блок.
7. В итоге имеем такое представление

8. Идем в Схему блоков (/admin/structure/block) и добавляем наш блок в нужный регион
9. Готово.

Дополнения.

1. Вместо поля "Изображение" можно использовать поле "медиа"
2. Вместо нод можно сразу использовать медиа
3. Я намеренно не упоминаю composer и drush, т.к. статья для тех, кто друпал только начал осваивать

Автор

ivnish Drupal FullStack Developer

Комментарии

Аватар пользователя icbook icbook 11 ноября 2019 в 11:19

Спасибо за детальный ответ. Нет у меня в настройках поля ссылки в типе "Слайд" указанных Вами опций.

Аватар пользователя ivnish ivnish 11 ноября 2019 в 11:43

Это настройки поля. А начиная с пятого пункта речь уже идет о полях в представлении. Допишу в текст, пожалуй, раз такие вопросы возникли

Аватар пользователя iehon iehon 22 апреля 2020 в 9:04

Варианты хороши, но жаль что не простые. Slick у меня так и не завелся.
Пробую nivo, в нем все что надо для простого запуска слайдера на главной - картинка и ссылка на страницу. Но он вызывает ошибку и белый лист. Если получится сделать напишу решение.

Аватар пользователя ivnish ivnish 22 апреля 2020 в 9:10

Простые, простые. Требуются лишь базовые знания
1) установка модулей
2) установка библиотек
3) понимание принципа работы views