От автора: приветствую вас, друзья. В этой статье мы продолжим работу со слайдерами jQuery и сегодня мы познакомимся с еще одним удачным решением в области каруселей — это плагин Elastislide (carousel), который позволяет реализовать несколько вариантов слайдера-карусели для сайта.
Необходимость использовать слайдеры-карусели на сайтах возникает достаточно часто. Нередко в виде такого небольшого слайдера на страницах интернет-магазинов выводят сопутствующие, популярные товары и прочие рекламные предложения.
В современных реалиях крайне желательно, чтобы такой слайдер был адаптивным — фактически это основное требование к нему. И карусель Elastislide полностью удовлетворяет этому требованию.
Давайте попробуем установить карусель Elastislide и поработать с ее настройками. Как обычно, начнем со скачиванию плагина. Получить его можно с официального репозитория на GitHub. После скачивания архива со слайдером, подключим необходимые файлы стилей и скриптов:
Бесплатный курс «Full-Stack практика»
Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS
Получить курс| 1 2 3 4 5 | <link rel="stylesheet" href="elastislide/css/elastislide.css"> <script src="elastislide/js/modernizr.custom.17475.js"></script> <script src="https://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:
| 1 2 3 4 5 6 | <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> |
Ну и, само собой, инициализация карусели:
| 1 2 3 | $(function() { $('#carousel').elastislide(); }); |
Собственно, все. Можем наслаждаться полученным результатом.
Полученный слайдер, как и договаривались, адаптивен, в чем мы можем убедиться, изменяя размеры страницы. Теперь немного об опциях, которые нам доступны. Их не так много, но многи ли на самом деле нам нужно для работы с простенькой каруселью.
Например, вам может понравиться настройка orientation со значением vertical. Как вы, наверное, уже догадались, применим эту настройку мы получим вертикальную ориентацию карусели:
| 1 2 3 | $('#carousel').elastislide({ orientation : 'vertical' }); |
Также нам может пригодиться опция minItems, которая устанавливает минимальное количество отображаемых в карусели слайдов (вы ведь не забыли, что она адаптивна?):
| 1 2 3 4 | $('#carousel').elastislide({ // orientation : 'horizontal', minItems : 4, }); |
Вот, собственно и все, что я вам хотел показать сегодня. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!
Бесплатный курс «Full-Stack практика»
Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS
Получить курс
Добрый день!
Хороший слайдер. Но вот проблема — В браузерах Хром и Яндекс изображения слетают и слайдер не отображается. В мозилле же всё нормально.
Здравствуйте.
Проверил в Хроме исходники — проблем нет. Также можно проверить и , у меня также с ним все хорошо.
Да, Андрей, на другом сайте работает…. А на моём похоже проблема в стилях… что-то его схлопывает
вот ссылка
km1954.ru/challenge
Или проблема в совместимости с Lightbox… но в мозилле всё нормально.
Возможно. Попробуйте отключить временно, чтобы проверить.
Андрей, вот какая штука. В слайдере идут изображения, которые открываются во всплывающем окне с помощью lightbox.
Причем к изображениям применены стили. То есть само изображение не как ссылка, а как «background» к «img»- классу. Это я сделал из-за того, что изображения имеют разный размер, для лучшего отображения в слайдере. Чтобы оно не сжималось под размер окна, я применил «background-size=cover».
Попробовал сделать просто ссылку на изображение — всё появилось. Значит речь не о конфликте скриптов.
Но что можно сделать в этой ситуации?
>>Но что можно сделать в этой ситуации?
Подготовить изображения и использовать src вместо background для вывода изображений… или искать другой слайдер.
Понял. Спасибо, Андрей.
Пожалуйста)