Слайдер Elegant Accordion. Установка и настройка

Слайдер Elegant Accordion. Установка и настройка

От автора: приветствую вас, друзья. В этой статье мы продолжим работу со слайдерами jQuery и сегодня мы познакомимся со своеобразным слайдером — Elegant Accordion. Это действительно элегантный слайдер в виде аккордеона, который будет смотреться очень эффектно на любом сайте.

Сегодня на очереди у нас оригинальный слайдер, который на самом деле не совсем является слайдером. Это классический аккордеон, в котором слайды представлены в виде секций, раздвигающихся при наведении мыши и показывающих слайд целиком. Смотрится очень эффектно и нас действительно не покидает ощущение элегантности. Собственно, сам плагин именно потому и называется — Elegant Accordion.

На официальной странице плагина можно найти пример его работы и коротенькую документацию. Давайте попробуем соорудить себе такой же аккордеон слайдов.

Слайдер Elegant Accordion. Установка и настройка

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

Ну и, конечно же, необходима разметка. Она относительно сложна, хотя ничего сложного на самом деле в ней нет. Нам необходим список ul. Элементы списка li — будут секциями аккордеона. При этом изображения для слайдов мы будем добавлять в качестве фона, через background-image. Также внутри элементов списка (секций аккордеона) можно разместить заголовок секции, ее описание, ссылку или другое содержимое.

И несколько дополнительных стилей:

Обратите внимание, первые две картинки мы установили бэкграундом через стили, а картинки для двух последних секций установили через HTML атрибут data-bg. Т.е. картинки можно устанавливать любым из способов.

Ну и финальный штрих — инициализация плагина:

Супер! Мы получили аналогичный слайдер на своей страничке. Мне нравится. Слайдер, конечно, не может похвастаться адаптивностью, но это и логично, поскольку концепт таких решений несколько иной. Вот, собственно и все, что я вам хотел показать сегодня. сходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!

Метки:

Похожие статьи:

Комментарии Вконтакте: