От автора: приветствую вас, друзья. В этой статье мы продолжим работу со слайдерами jQuery и сегодня мы познакомимся со своеобразным слайдером — Elegant Accordion. Это действительно элегантный слайдер в виде аккордеона, который будет смотреться очень эффектно на любом сайте.
Сегодня на очереди у нас оригинальный слайдер, который на самом деле не совсем является слайдером. Это классический аккордеон, в котором слайды представлены в виде секций, раздвигающихся при наведении мыши и показывающих слайд целиком. Смотрится очень эффектно и нас действительно не покидает ощущение элегантности. Собственно, сам плагин именно потому и называется — Elegant Accordion.
На официальной странице плагина можно найти пример его работы и коротенькую документацию. Давайте попробуем соорудить себе такой же аккордеон слайдов.
Скачайте архив плагина со страницы на GitHub или просто возьмите его из исходников к уроку. Теперь подключим необходимые для работы плагина стили и скрипты.
1 2 3 |
<link rel="stylesheet" href="css/style.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/jquery.elegantAccordion.js"></script> |
Ну и, конечно же, необходима разметка. Она относительно сложна, хотя ничего сложного на самом деле в ней нет. Нам необходим список ul. Элементы списка li — будут секциями аккордеона. При этом изображения для слайдов мы будем добавлять в качестве фона, через background-image. Также внутри элементов списка (секций аккордеона) можно разместить заголовок секции, ее описание, ссылку или другое содержимое.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<ul class="accordion" id="accordion"> <li class="bg1"> <h2>Guler</h2> <div> <h2>Guler</h2> <p>Lorem ipsum dolor...</p> <a href="#">more →</a> </div> </li> <li class="bg2"> <h2>Phillips</h2> <div> <h2>Phillips</h2> <p>Lorem ipsum dolor...</p> <a href="#">more →</a> </div> </li> <li class="bg3" data-bg="images/3.jpg"> <h2>Diamanti</h2> <div> <h2>Diamanti</h2> <p>Lorem ipsum dolor...</p> <a href="#">more →</a> </div> </li> <li data-bg="images/4.jpg"> <h2>Meiklejohn</h2> <div> <h2>Meiklejohn</h2> <p>Lorem ipsum dolor...</p> <a href="#">more →</a> </div> </li> </ul> |
И несколько дополнительных стилей:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.accordion { clear: both; } ul.accordion li { background-repeat: no-repeat; background-position: top left; } ul.accordion li.bg1{ background-image:url(images/1.jpg); } ul.accordion li.bg2{ background-image:url(images/2.jpg); } |
Обратите внимание, первые две картинки мы установили бэкграундом через стили, а картинки для двух последних секций установили через HTML атрибут data-bg. Т.е. картинки можно устанавливать любым из способов.
Ну и финальный штрих — инициализация плагина:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(function() { $('#accordion').eAccordion({ easing: 'swing', autoPlay: false, startStopped: false, stopAtEnd: false, delay: 3000, animationTime: 600, hashTags: true, pauseOnHover: true, height: null, expandedWidth: '480px', neutralState: true, bgHeight: '340px' }); }); |
Супер! Мы получили аналогичный слайдер на своей страничке. Мне нравится. Слайдер, конечно, не может похвастаться адаптивностью, но это и логично, поскольку концепт таких решений несколько иной. Вот, собственно и все, что я вам хотел показать сегодня. сходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!