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

30

Від автора: вітаю вас, друзі. У цій статті ми продовжимо роботу зі слайдерами jQuery і сьогодні ми познайомимося зі своєрідним слайдером — Elegant Accordion. Це дійсно елегантний слайдер у вигляді акордеона, який буде виглядати дуже ефектно на будь-якому сайті.

Сьогодні на черзі у нас оригінальний слайдер, який насправді не зовсім є слайдером. Це класичний акордеон, в якому слайди представлені у вигляді секцій, розсовуються при наведенні миші і показують слайд цілком. Виглядає дуже ефектно і нас дійсно не покидає відчуття елегантності. Власне, сам плагін саме тому і називається — 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 ви можете дізнатися з наших уроків або курсу. Удачі!