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

Дата публикации: 2017-01-19

От автора: приветствую вас, друзья. В этой статье мы продолжим работу со слайдерами jQuery и сегодня мы познакомимся с еще одним удачным решением в области каруселей — это плагин Elastislide (carousel), который позволяет реализовать несколько вариантов слайдера-карусели для сайта.

Необходимость использовать слайдеры-карусели на сайтах возникает достаточно часто. Нередко в виде такого небольшого слайдера на страницах интернет-магазинов выводят сопутствующие, популярные товары и прочие рекламные предложения.

В современных реалиях крайне желательно, чтобы такой слайдер был адаптивным — фактически это основное требование к нему. И карусель Elastislide полностью удовлетворяет этому требованию.

Давайте попробуем установить карусель Elastislide и поработать с ее настройками. Как обычно, начнем со скачиванию плагина. Получить его можно с официального репозитория на GitHub. После скачивания архива со слайдером, подключим необходимые файлы стилей и скриптов:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

<link rel="stylesheet" href="elastislide/css/elastislide.css">
<script src="elastislide/js/modernizr.custom.17475.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="elastislide/js/jquerypp.custom.js"></script>
<script src="elastislide/js/jquery.elastislide.js"></script>

Несложная типовая разметка карусели представлена обычным списком ul:

<ul id="carousel" class="elastislide-list">
 <li><a href="#"><img src="images/small/1.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/small/2.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/small/3.jpg" alt=""></a></li>
 <!-- -->
</ul>

</ul>

Ну и, само собой, инициализация карусели:

$(function() {
 $('#carousel').elastislide();
});

$(function() {

$('#carousel').elastislide();

});

Собственно, все. Можем наслаждаться полученным результатом.

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

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

Например, вам может понравиться настройка orientation со значением vertical. Как вы, наверное, уже догадались, применим эту настройку мы получим вертикальную ориентацию карусели:

$('#carousel').elastislide({
 orientation : 'vertical'
});

$('#carousel').elastislide({

orientation : 'vertical'

});

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

Также нам может пригодиться опция minItems, которая устанавливает минимальное количество отображаемых в карусели слайдов (вы ведь не забыли, что она адаптивна?):

$('#carousel').elastislide({
 // orientation : 'horizontal',
 minItems : 4,
});

$('#carousel').elastislide({

// orientation : 'horizontal',

minItems : 4,

});

Вот, собственно и все, что я вам хотел показать сегодня. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее