пятница, 2 октября, 2015 - 14:57

Установка

drush en -y owlcarousel
cd sites/all/libraries
wget https://github.com/OwlFonk/OwlCarousel/archive/1.3.2.zip && unzip 1.3.2.zip && rm 1.3.2.zip && mv OwlCarousel-1.3.2/owl-carousel owl-carousel && rm -r OwlCarousel-1.3.2
drush en -y owlcarousel_fields owlcarousel_views owlcarousel_ui

Сам я перепробовал много слайдеров и у каждого были свои недостатки.
В Owl carousel недостатки есть, но их мало и они не значительные.
По этому он сейчас является моим основным слайдером.

Кому интересно есть ещё один неплохой слайдер slick ( http://kenwheeler.github.io/slick ).

Описание

Модуль Owl Carousel позволяет выводить слайдер двумя способами field (не рассматриваю так, как не использую) и views.

Настройка

Начнём со страницы настроек слайдера ( admin/config/user-interface/owlcarousel ).
На данной странице слева расположенные все группы настроек.

Создаём нашу группу настроек я назвал её "test" ( admin/config/user-interface/owlcarousel/owlcarousel_settings_test ).

Теперь собственно о самих параметрах

Можно почитать на официальном сайте http://owlgraphic.com/owlcarousel/#customizing.
Я лишь расскажу о тех которые мне приходится менять.

  • Items - количество слайдов одновременно отображающихся на странице.
  • ITEMS DESKTOP, ITEMS DESKTOP SMALL, ITEMS DESKTOP TABLET, ITEMS DESKTOP TABLET SMALL, ITEMS DESKTOP MOBILE - для responsive тут нужно менять только количество колонок и то если требует дизайн.
  • Single Item - отображает по одному слайд, удобно для слайдеров в шапку.
  • Auto Play - время до автоматического старта карусели (0 - выключает autopaly)
  • Stop on Hover - останавливает слайдер при наведении мышки, ставлю всегда.
  • Navigation - показывать ссылки "next", "prev" (стрелки).
  • Rewind Nav - по идеи это должен быть зацикливание, но оно работает не правильно так что лучше его отключать.
  • Pagination - ссылки на слайды (кругляшки под слайдером).
  • Add Class Active - добавляет класс "active" на слайд удобно если нужно стилизовать активный слайд по другому.

Слайдер в виде блока

Чтобы сделать блок будем использовать модуль views.

drush en -y views && drush en -y views_ui

Создаём наше представление ( admin/structure/views/add ).

В данном случаи это будут статьи.

Называем наше представление "Блок со статьями".
Ставим галочку "Создать блок".
Формат отображения ставим "Owl Carousel" of "тизеры" и жмём продолжить.

Теперь в разделе "Формат" нажимаем настройки и выбираем из списка нашу группу ("owlcarousel_settings_test") для слайдера.

И не забываем и применить, и сохранить.

Наш блок готов ищем его в блоках ( admin/structure/block ).

И ищем наш блок и перемещаем в регион "Содержимое".

Теперь на сайте можно увидеть такой блок.

Осталось только оформить его через css.

Дерзайте ;)

Добавить комментарий

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.