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

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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

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

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

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree