С помощью модуля Views Slideshow можно делать огромное число различного рода слайдеров. Модуль позволяет очень гибко настраивать отображаемые поля, и способ их группировки в слайды и саму смену слайдов. До 3-й версии этого модуля можно было выбирать 2 вида пейджера: на основе полей либо числовой. В 3-й версии остался доступен для выбора только пейджер на основе полей. Мы покажем как с помощью полей можно получить и числовой навигатор-пейджер и пейджер для листания в виде точек.

Данный материал рассчитан на тех пользователей, которые уже имеют опыт работы с Views Slideshow и знают как создать слайдер.

 

Создание навигатора в виде числового пейджера

Ниже показан процесс создания пейджера (навигатора), где в качестве навигации используется номер слайда, как показано на рисунке 1 ниже

Числовой навигатор-пейджер для Views Slideshow
Рис.1 Числовой навигатор (пейджер) для Views Slideshow

  1. Добавляем все необходимые поля в вашу вьюху, которые будут отображаться в самом слайде
  2. Добавляем новое поле
  3. Выбираем поле "Глобальный: счетчик результатов"
  4. В настройках этого поля удаляем метку и кликаем "исключить из вывода"
  5. Применяем (сохраняем) эти изменения
  6. Теперь идем к настройкам Slideshow
  7. Включаем навигатор в той позиции (над или под слайдом) которая вам нужна
  8. Тип пейджера остается "Поля"
  9. Далее в качестве поля для навигатора выбираем только наше поле "Глобальный: счетчик результатов"
  10. Сохраняем изменения, вносим необходимые правки в CSS и любуемся на созданный нами слайдер

 

Использование навигатора в виде "точек"

Часто возникает необходимость вместо чисел в навигаторе использовать кружки илии другие одинаковые изображения. Это также легко реализуется, по аналогии с предыдущим примером, лишь изменив немного содержимое поля для пейджера. Идея в том, чтобы выводить пустое поле пейджера и потом, через CSS настроить его 3 состояния(активно, не активно, при наведении) используюя свойство background. Пример "точечного" навигатора приведен на рисунке 2

Точечный навигатор для Drupal Views Slideshow
Рис.2 Пример точечного навигатора для Views Slideshow

  1. Добавляем все необходимые поля в вашу вьюху, которые будут отображаться в самом слайде
  2. Добавляем новое поле
  3. Выбираем поле "Глобальный: счетчик результатов"
  4. В настройках этого поля удаляем метку и кликаем "исключить из вывода"
  5. Выбираем "Заменить выводимое поле значением" и пишем сюда <span class="custom-navigator>"&nbsp;</span> - чтобы поле выводило пустой пробел
  6. Применяем (сохраняем) эти изменения
  7. Теперь идем к настройкам Slideshow
  8. Включаем навигатор в той позиции (над или под слайдом) которая вам нужна
  9. Тип пейджера остается "Поля"
  10. Далее в качестве поля для навигатора выбираем только наше поле "Глобальный: счетчик результатов"
  11. Сохраняем изменения в вьюхе
  12. В CSS настраиваем 2 состояния для поля-навигатора custom-navigator - активно, и неактивно. Я использовал background с изображением круга, но можно любой другой. При наведении меняем бекграунд, так же как и для активного элемента.
Ключевые слова: