• статья
  • pantey

Простой слайдер с потрясающими эффектами для Drupal 7

06.11.2013

Всё чаще в проектах приходится реализовывать слайдеры на главных страницах сайта, в сайдбарах и еще где это только можно и каждый раз я писал кастом из под шаблона сайта, а в голове давно была мысль написать простой слайдер, который можно спокойно переносить с одного сайта на другой. И вот наконец выдался свободный день, который я потратил на написание своего модуля «Slider», который реализует большинство потребностей современных сайтов. Сразу хочу заметить, что сам скрипт используемый в слайдере не мой, а вот этого парня, который распространяет его по лицензии MIT, чем собственно я и воспользовался. Саму демку слайдера можно посмотреть здесь. А как это работает в Drupal 7, можно скачав мой модуль вот отсюда (Проверяйте наличие новой версии в конце статьи). Сразу оговорюсь, что скорее всего на Drupal.org он вряд ли появится, так что любители Drush его не найдут. А теперь собственно расскажу, что из себя представляет модуль и как им пользоваться.

Установка происходит как и со всеми модулями, так что вопросов быть не должно. Замечу, что данный слайдер я определил в раздел модулей «User interface».

Так же Slider зависит от модуля jQuery_update, так что его установка так же необходима. Минимальная версия jQuery 1.7. После активации модуля, в разделе «Конфигурация», в подразделе «Интерфейс пользователя» вы увидите новый подзаголовок «Block Slider Settings»

В котором находятся все основные настройки слайдера, а так же загружаемые изображения слайдера и описание, если таковые имеются.

Как вы можете видеть, для удобства, я пока всё оставил на русском языке, в дальнейшем переведу на английский, но для dev. и так сойдёт. Теперь давайте пройдемся по пунктам настроек слайдера. Слайд Номер 1 по Слайд Номер 5 несёт в себе поле для загрузки изображения и описание к нему.

Если вам описание не нужно, то просто не заполняйте данное поле. Сделал вкладки для каждого слайда отдельно, ибо так мне показалось более удобным . Ограничение как вы наверное уже догадались составляет 5 слайдов, так как для слайдеров 5 изображений более чем достаточно, хотя в некоторых случаях имеет место быть. Теперь о разделе «Настройка эффектов слайдера»

К каждому полю добавил описание, так что думаю более чем понятно. Название эффектов анимации полностью совпадают с эффектами плагина, так что в демке можете посмотреть все имеющиеся эффекты и выбрать для себя в дальнейшем нужный.

Пункт «Автопрокрутка слайдов» добавляет возможность запускать прокрутку изображений слайдера сразу же после загрузки страницы.

Пункт «Использование нумерации слайдов», изменяет формат превью под слайдами

Пункт «Эскизы слайдов» - управляет отображением показа эскизов слайдов при наведении

Пункт «Размер превью» определяет размер эскизов слайдов от оригинального размера изображения, вводится в %.

И теперь раздел настроек «Настройки блока слайдера», данный раздел несёт в себе лишь две настройки это ширина и высота блока со слайдером.

После выбора настроек слайдера не забудьте его вывести в необходимый вам регион. Название блока «Slider».

Если вам необходимо добавить какие то стили для блока со слайдером, то вот вам название класса

  1. .slider-wrap

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

Обновление до версии 1.2.2 - [Перед обновлением модуля рекомендуется полностью удалить старую версию]

Изменения в модуле:

  • Добавлена возможность использовать любой из пресетов image_style
  • Исправлены некоторые баги, которые выдавали ошибки
  • Решена проблема с сохранением загружаемых файлов
  • [ИСПРАВЛЕНО] На данный момент загрузка изображений должна производиться по порядку с 1 по 5 слайд (а не в произвольном), иначе получите ошибку

скачать версию модуля 1.2.2

Обновление до версии 1.2.3

Изменения в модуле:

  • Добавлена возможность выбора работы с изображениями, либо использовать оригинальные размеры изображения, либо использовать любой из пресетов Image Style
  • Немного переделан интерфейс

скачать версию модуля 1.2.3

Обновление до версии 1.2.4

Изменения в модуле:

  • Добавлена мультиязычность для описания слайдов

скачать версию модуля 1.2.4

Обновление до версии 2.1

Изменения в модуле:

  • Добавлена возможность неограниченного создания слайдов
  • Исправлена ошибка, после которой не сохранялись изображения слайдера, в версии 2.0

Теперь для добавления слайдов появился отдельный интерфейс, основанный на entity API, так что данный модуль (entity api) теперь обязателен для установки.

Все настройки модуля находятся там же, интерфейс добавления слайдов находится по пути "Структура -> Слайдер". Перед установкой необходимо полностью удалить предыдущую версию - они не совместимы.

скачать версию модуля 2.1

Обновление до версии 2.1.1

Изменения в модуле:

  • Исправлена ошибка после удаления любого из слайдов
скачать версию модуля 2.1.1

Обновление до версии 2.1.2

Перед использованием данной версии, необходимо полностью удалить предыдущую. Они не совместимы. Изменения в модуле:

  • Добавлена возможность указывать для слайда страницы, на которых данный слайд должен отображаться. Адреса необходимо указывать относительные, например: node/1
  • Модуль pathauto - обязателен для установки
  • Добавил контекстные ссылки для блока слайдера, для быстрого перехода к настройкам слайдера, списку слайдов и добавлению слайда
  • скачать версию модуля 2.1.2

Видео инструкция, как настроить слайдер

-->
Узнавай о новых статьях сайта - первым. Просто подпишись на рассылку.

Комментарии (152)

Profile picture for user 1541
Алексей Гунин
06.05.2015

Было бы очень здорово видеть такую возможность!

Profile picture for user pr0g
pr0g
23.04.2015

Спасибо за отличный модуль слайдера.
Есть одно предложением, сделать регулируемую задержку перед сменой слайдера.

Profile picture for user 1541
Прохожий
01.10.2015

Да, очень бы эта функция не помешала! Или хотя бы указать по какому пути её можно выставить вручную.

Profile picture for user 1541
Руслан
23.04.2015

сори это не то что я думал :( я думал что это для привязке слайда к ноде.
Да я хочу чтоб при клике он открывал определенную ноду

Profile picture for user 1541
Самослав
06.05.2015

Здравствуйте. Скажите, пожалуйста, а как изменить стиль текста Вашего модуля?
И было бы здорово иметь возможность скрытия модуля при отображении на мобильных устройствах.

Profile picture for user 1541
Анатолий5
09.06.2015

Не работает в теме Bootstrap

Profile picture for user 1541
Виталий
17.06.2015

Добрый день! Подскажите, пожалуйста, как изменить цвет кружочков под слайдером?

Profile picture for user 1541
Алексей
13.07.2015

Как добавить ссылки, чтобы при нажатии на картинку или заголовок переходила в определенное место?

Profile picture for user 1541
Прохожий
01.10.2015

Слайдер очень понравился. Но все же хотелось бы иметь возможность к картинкам указывать ссылки на внутренние материалы сайта. Может кто поможет новичку, и подскажет как это реализовать? Буду очень благодарен!

Profile picture for user 1541
Virkom
22.10.2015

Здравствуйте. Я очень долго искал слайдер без наворотов. Ну не нужно мне монструозный View гонять. Достаточно 5 картинок и все. Но таких нет. Случайно набрел сюда и понял, что это то, что нужно.
Но есть проблема. Все установил, но есть возможность загрузить только одну картинку. Либо это баг, либо я чего-то недопонимаю и где-то не нашел настройки.
Помогите, пожалуйста. Модуль - то, что нужно. Не хочу переходить на монстров из-за такого пустяка.

Profile picture for user pantey
pantey
22.10.2015

Слайды загружаются последовательно, а не массово все картинки. Т.е создали один слайд, затем можете создать еще и так до бесконечности

Profile picture for user 1541
Virkom
22.10.2015

Спасибо большое за помощь. Я не додумался, что это оформление отдельного слайда, а не слайдера целиком...

Profile picture for user 1541
Гость
22.10.2015

Вот примерный вид при создании слайдера:
слайдер

Profile picture for user pantey
pantey
22.10.2015

и что вас здесь смущает ?

Profile picture for user 1541
KRpz
26.10.2015

Действительно.. На bootstrap не работает.. Отображает картинки одну под одной.. Хотя версия jQuery 1.7.. что может быть?

Profile picture for user 1541
Михаил
03.11.2015

Здравствуйте,
установил модуль, захожу в: Главная » Управление » Конфигурация » Интерфейс пользователя
Block Slider Settings
вижу только настройки слайдера, а загрузок картинки нет.

Profile picture for user pantey
pantey
03.11.2015

Читайте статью до конца, а именно что добавлялось в новые версии... Слайды добавляются по пути Структура - Слайдер

Profile picture for user 1541
Serty
30.11.2015

Отличный модуль! Но есть вопрос, как скрыть полосу прогрузки слайдов?

Profile picture for user 1541
Eugene
28.01.2016

Здравствуйте!
Вообще не понял, как вывести модуль на главную страницу. Нужно создать блок, а в содержимом блоке что писать? Как это сделать?

Profile picture for user pantey
pantey
28.01.2016

Ничего создавать не нужно. Блок уже есть, выводите его где хотите и добавляйте изображения по пути Структура - Слайдер.

Profile picture for user 1541
Eugene
28.01.2016

http://chasdom.ru/
загружаю картинки а они вообще не появляются и как-то съезжают((

Profile picture for user pantey
pantey
28.01.2016

так настройте пресеты изображения и будет у вас все нормально отображаться. Выбор пресетов для слайдера находятся по пути Конфигурация - настройки слайдера

Profile picture for user 1541
Eugene
28.01.2016

Да какие значения вводить?
Я уже все перепробовал, у меня только строка эта и все, больше ничего. Вообще не понимаю. Ну оставил я превью 25%, размер блока ввел 800х800. Что за блок?
В общем, странно.

Profile picture for user 1541
Eugene
28.01.2016

Помогите мне, пожалуйста :) вовсе не понимаю.

Profile picture for user pantey
pantey
28.01.2016

Вам бы тогда с основными понятиями Drupal ознакомиться.
Создаете новый пресет изображения, по пути

admin/config/media/image-styles

Добавляете необходимые действия для изображения, например изменить размер 1180px на 450px. Сохраняете. Далее идете в настройки слайдера,

admin/config/user-interface/slider

В разделе Image Style settings выбираете новый созданный вами пресет изображения.
В разделе Settings Slider Block вписываете значения вашего пресета 1180 на 450.
Сохраняте.

Profile picture for user 1541
Eugene
28.01.2016

А к чему тогда параметры large, medium в настройках? Если вы написали, что нужно размеры еще подгонять и так далее.

Profile picture for user pantey
pantey
28.01.2016

large, medium - это системные пресеты изображений.

Profile picture for user 1541
Eugene
28.01.2016

Ну вот загрузил я в слайд изображение, допустим 2000х2000 пикселей.
Выбираю лардж, который должен отмасштабировать до 480х480. Допустим размеры блока 800х800. Так можно? Но не работает вовсе это! Почему не выходит?

Profile picture for user pantey
pantey
28.01.2016

что именно не работает ? Если размеры блока будут больше слайда, то слайд заполнит всю область блока, поэтому и нужно указывать размеры точно.

Profile picture for user 1541
Eugene
28.01.2016

Загрузил изображение 2000х2000, выбрал лардж, установил размер блока 480х480 ну и вот http://chasdom.ru/ ничего не вышло, строчка и все.
И не понимаю, как победить. В чем логика и какая последовательность действий. Почему не масштабируется 2000х2000 до 480х480. Или мне нужно создавать масштабирование под каждую картинку?

Profile picture for user 1541
Eugene
28.01.2016

Ну вот скажите, если хочу загрузить изображение 2000х2000, как сделать рабочий слайд?

Profile picture for user pantey
pantey
28.01.2016

Скидывайте на почту доступ к сайту, я посмотрю.

Profile picture for user pantey
pantey
28.01.2016

вообщем записал видео настройки слайдера, проверьте - правильно ли вы все делаете. Видео в статье.

Profile picture for user 1541
Eugene
28.01.2016

У меня не вышло( может действительно на почту данные сбросить, чтобы вы посмотрели?

Profile picture for user 1541
Наталия
31.01.2016

Здравствуйте, при установке модуля слайда выдало такую ошибку, подскажите что нужно поправить? Заранее благодарю!
PDOException: SQLSTATE[42S02]: Base table or view not found: 1146 Table 'kompleks-s_cms.slider' doesn't exist: SELECT sl.id AS id, sl.title AS title, sl.image AS image, sl.url AS url FROM {slider} sl; Array ( ) в функции slider_block_view() (строка 70 в файле /home/kompleks-s/nanotehprom.ru/docs/sites/all/modules/slider/slider.module).

Profile picture for user pantey
pantey
01.02.2016

у вас используется префикс для таблиц баз данных kompleks-s_cms.slider. Посмотрите под каким именем у вас создалась таблица slider при установке модуля и вообще создалась ли !

Profile picture for user 1541
Гость
01.02.2016

Здравствуйте Pantey, по разбираюсь на досуге и отпишусь, что получилось, пока создала слайдер на вьюсе, но там нет таких красивых эффектов как здесь.

Profile picture for user 1541
Андрей
01.03.2016

Весьма симпатичный слайдер. Но как отключить полоску сверху, которая появляется в режиме слайд-шоу, и описание слайда?

Profile picture for user 1541
Сергей
27.03.2016

Почему то слайдер не выводиться на главной странице. На любой другой выводиться в любом месте, а на главной нет. Может ли это быть из-за того что главная перекрыта через page--front.tpl.php?

Profile picture for user 1541
Сергей
27.03.2016

Вопрос снят. Через некоторое время каким то образом заработало

Profile picture for user 1541
Наталия
27.03.2016

Возможно нужно было запустить cron и очистить кэш

Profile picture for user 1541
Михаил
15.04.2016

А как сделать слайд ссылкой, я не понял?

Profile picture for user 1541
Михаил
15.04.2016

В программировании не силён - извернулся доступными средствами: модуль Block Title Link и растянул ссылку через css на 80% слайдера (чтобы стрелки не перекрывать)

Profile picture for user 1541
Михаил
15.04.2016

А так слайдер очень крутой, только ссылок не хватает

Profile picture for user 1541
Alex
09.06.2016

Подскажите плиз. как убрать или скрыть имена слайдов а заодно и строку в которой они появляются. или если нельзя совсем, то как настрить ей размер и шрифт надписи. у меня размер слайдеоа 800х150 и строка при этом занимает почти теть самого слайдера.

Спасибо

Profile picture for user pantey
pantey
11.05.2018

закоментируйте эту строку

$desc = '

' .$title .'

'; в файле slider.module

Profile picture for user 1541
Альберт
21.06.2016

Спасибо за модуль! Давайте его на drupal.org! Очень простой и быстро настраивается. При этом очень функционален!

Profile picture for user 1541
Игорь Лебедев
04.02.2018

Под мобильную версию не расчитан?

Воспроизведение только в демо версии?

Profile picture for user 1541
Алекс
11.05.2018

Пантей подскажите все-таки, как сделать загружаемые слайды-картинки ссылкой на нужный адрес?

Profile picture for user pantey
pantey
11.05.2018

В версии 2.1.2 - для этого было создано отдельное поле