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

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

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

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

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

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

Скачайте архив плагина со страницы на 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