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

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

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

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

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

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

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

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.elegantAccordion.js"></script>

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

<ul class="accordion" id="accordion">
 <li class="bg1">
  <h2>Guler</h2>
  <div>
 <h2>Guler</h2>
 <p>Lorem ipsum dolor...</p>
 <a href="#">more &rarr;</a>
  </div>
 </li>
 <li class="bg2">
  <h2>Phillips</h2>
  <div>
 <h2>Phillips</h2>
 <p>Lorem ipsum dolor...</p>
 <a href="#">more &rarr;</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 &rarr;</a>
  </div>
 </li>
 <li data-bg="images/4.jpg">
  <h2>Meiklejohn</h2>
  <div>
 <h2>Meiklejohn</h2>
 <p>Lorem ipsum dolor...</p>
 <a href="#">more &rarr;</a>
  </div>
 </li>
</ul>

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

.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 вы можете узнать из наших уроков или курса. Удачи!

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

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

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

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

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree