Від автора: вітаю вас, друзі. У цій статті ми продовжимо роботу зі слайдерами jQuery і сьогодні ми познайомимося зі своєрідним слайдером — Elegant Accordion. Це дійсно елегантний слайдер у вигляді акордеона, який буде виглядати дуже ефектно на будь-якому сайті.
Сьогодні на черзі у нас оригінальний слайдер, який насправді не зовсім є слайдером. Це класичний акордеон, в якому слайди представлені у вигляді секцій, розсовуються при наведенні миші і показують слайд цілком. Виглядає дуже ефектно і нас дійсно не покидає відчуття елегантності. Власне, сам плагін саме тому і називається — Elegant Accordion.
На офіційній сторінці плагіна можна знайти приклад його роботи і коротеньку документацію. Давайте спробуємо спорудити собі такий же акордеон слайдів.
Скачайте архів плагіна зі сторінки на GitHub або просто візьміть його з исходников до уроку. Тепер підключимо необхідні для роботи плагіна стилі і скрипти.
Ну і, звичайно ж, необхідна розмітка. Вона відносно складна, хоча нічого складного насправді в ній немає. Нам необхідний списку ul. Елементи списку li — будуть секціями акордеона. При цьому зображення для слайдів ми будемо додавати в якості фону, через background-image. Також всередині елементів списку (секцій акордеона) можна розмістити заголовок секції, опис, посилання або інший вміст.
-
Guler
Guler
Lorem ipsum dolor…
more →
-
Phillips
Phillips
Lorem ipsum dolor…
more →
-
Diamanti
Diamanti
Lorem ipsum dolor…
more →
-
Meiklejohn
Meiklejohn
Lorem ipsum dolor…
more →
І кілька додаткових стилів:
.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. Тобто картинки можна встановлювати будь-яким із способів.
Ну і фінальний штрих — ініціалізація плагіна:
$(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 ви можете дізнатися з наших уроків або курсу. Удачі!
