С помощью модуля Views Slideshow можно делать огромное число различного рода слайдеров. Модуль позволяет очень гибко настраивать отображаемые поля, и способ их группировки в слайды и саму смену слайдов. До 3-й версии этого модуля можно было выбирать 2 вида пейджера: на основе полей либо числовой. В 3-й версии остался доступен для выбора только пейджер на основе полей. Мы покажем как с помощью полей можно получить и числовой навигатор-пейджер и пейджер для листания в виде точек.
Данный материал рассчитан на тех пользователей, которые уже имеют опыт работы с Views Slideshow и знают как создать слайдер.
Создание навигатора в виде числового пейджера
Ниже показан процесс создания пейджера (навигатора), где в качестве навигации используется номер слайда, как показано на рисунке 1 ниже
Рис.1 Числовой навигатор (пейджер) для Views Slideshow
- Добавляем все необходимые поля в вашу вьюху, которые будут отображаться в самом слайде
- Добавляем новое поле
- Выбираем поле "Глобальный: счетчик результатов"
- В настройках этого поля удаляем метку и кликаем "исключить из вывода"
- Применяем (сохраняем) эти изменения
- Теперь идем к настройкам Slideshow
- Включаем навигатор в той позиции (над или под слайдом) которая вам нужна
- Тип пейджера остается "Поля"
- Далее в качестве поля для навигатора выбираем только наше поле "Глобальный: счетчик результатов"
- Сохраняем изменения, вносим необходимые правки в CSS и любуемся на созданный нами слайдер
Использование навигатора в виде "точек"
Часто возникает необходимость вместо чисел в навигаторе использовать кружки илии другие одинаковые изображения. Это также легко реализуется, по аналогии с предыдущим примером, лишь изменив немного содержимое поля для пейджера. Идея в том, чтобы выводить пустое поле пейджера и потом, через CSS настроить его 3 состояния(активно, не активно, при наведении) используюя свойство background. Пример "точечного" навигатора приведен на рисунке 2
Рис.2 Пример точечного навигатора для Views Slideshow
- Добавляем все необходимые поля в вашу вьюху, которые будут отображаться в самом слайде
- Добавляем новое поле
- Выбираем поле "Глобальный: счетчик результатов"
- В настройках этого поля удаляем метку и кликаем "исключить из вывода"
- Выбираем "Заменить выводимое поле значением" и пишем сюда <span class="custom-navigator>" </span> - чтобы поле выводило пустой пробел
- Применяем (сохраняем) эти изменения
- Теперь идем к настройкам Slideshow
- Включаем навигатор в той позиции (над или под слайдом) которая вам нужна
- Тип пейджера остается "Поля"
- Далее в качестве поля для навигатора выбираем только наше поле "Глобальный: счетчик результатов"
- Сохраняем изменения в вьюхе
- В CSS настраиваем 2 состояния для поля-навигатора custom-navigator - активно, и неактивно. Я использовал background с изображением круга, но можно любой другой. При наведении меняем бекграунд, так же как и для активного элемента.