Плагин jQuery - Elastislide

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

Задача может показаться простой, решаемой только уменьшением размера контейнера на маленьких экранах. Но в некоторых случаях (например, если размер изображений большой) нужно также изменять размер слайда. Плагин Elastislide имеет такую опцию, наряду с другими.

Elastislide использует плагин jQuery Touchwipe, который позволяет получать и обрабатывать событие wipe на iPhone, iPad или iPod.

 

Структура HTML

Разметка карусели состоит из основного контейнера, который выравнивает ширину плавающего контейнера, помещаемого внутрь него. (Если вы разместите карусель в контейнере с фиксированной шириной, она не будет адаптироваться к размеру экрана. Проверяйте ваш шаблон.)

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

<div id="carousel" class="es-carousel-wrapper">
	<div class="es-carousel">
		<ul>
			<li>
				<a href="#">
					<img src="images/medium/1.jpg" alt="image01" />
				</a>
			</li>
			<li>...</li>
			...
		</ul>
	</div>
</div>

Используйте атрибут ID и запускайте плагин:

$('#carousel').elastislide({
	imageW 	: 180
});

где imageW - ширина миниатюр.

 

CSS

Плагин Elastislide имеет следующие опции:

speed		: 450,
// скорость анимации

easing		: '',
// эффект перехода

imageW		: 190,
// ширина изображений

margin		: 3,
// поле для изображений справа

border		: 2,
// рамка изображений

minItems	: 1,
// минимальное количество слайдов, которое нужно выводить.
// При изменении размера окна будет выводиться слайдов не менее
// количества, заданного в парметре minItems
// (если значение minItems меньше, чем общее количество слайдов)

current		: 0,
// номер текущего слайда.
// При изменение окна плагин всегда будет 
// выводить слайды так, чтобы указанное изображение было видно.

onClick		: function() { return false; }
// Возвратная функция для события click на слайде.
// Пример получения номера слайда, на котором нажали кнопку мыши:
/*
$('#carousel').elastislide({
    onClick  :  function( $item ) {
        alert( 'кнопку мыши нажали на слайде № ' + $item.index() )
    }
});
*/

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

var $items	= $('<li><a href="#"><img src="images/large/1.jpg" alt="image01" /></a></li><li><a href="#"><img src="images/large/2.jpg" alt="image01" /></a></li>');
$('#carousel').append($items).elastislide( 'add', $items );

Демонстрация

 

 

Авторизоваться и Скачать

5 последних добавленных файлов в рубрике"Скрипты"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 15 Сентября 2011 10:56
    neverfan
    Супер спасибо! Вообще самая нужная вещь!!! А то jCarusel не может растягиваться и на разных разрешениях смотриться по разному!
  • 4 Октября 2011 14:01
    JocBro
    Согласен, вещь хорошая, только у меня проблема одна, сам скрипт работает хорошо, но конфликтует с другим скриптом. Когда отключаю
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    то другой скрипт работает хорошо, а этот нет. Подскажите, что можно в этом случае сделать.
    • 8 Октября 2011 14:04
      Аркадий Иванов
      ну дак ты зачем то jquary отключаешь, без него этот скрипт не работает
  • 31 Января 2012 00:06
    cektop48
    А как сделать, чтобы по клику на изображение открывалась ссылка? Ссылка подписана при наводке на нее, но не открывается(
    • 30 Марта 2012 13:38
      reanima
      мне тоже очень интересен ответ, подскажите пожалуйста как ссылки наладить Все разобрался событие onclick в настройках поменять нужно
    • 24 Апреля 2013 15:15
      salikhat_orazbaeva
      в jquery.elastislide.js удалите строчку onClick : function() { return false; }
  • 19 Февраля 2012 22:36
    creox
    Помогите прикрутить его к wordpress'у чето не работает
  • 24 Марта 2012 11:37
    vivi
    Я тоже не могу его запустить в WordPress. 1. В виджете "TEXT" вставляю код HTMl 2. между <head>...</head> прописываю стили и файлы .js 3. Незнаю куда вставить код.
    $('#carousel').elastislide({ imageW : 180
    });
    
    Объясните чайнику где и как запустить??? Спасибо!
  • 26 Марта 2012 23:13
    vivi
    Спасибо за ответ сам разобрался. Вся проблема была с путями в шапке.
  • 14 Апреля 2012 21:19
    ovchinnikovadurad
    Карусель встала без проблем
  • 16 Мая 2012 18:57
    ovchinnikovadurad
    А в каком месте отключать onclick?
  • 18 Мая 2012 00:02
    whitetru
    Помогите пожалуйста. Перестала работать в firefox прокрутка вверх-вниз. где находится отвечающий за это код? http://annflowers.ru/gall%20buk.html как пример. и что нужно добавить , чтобы работало без перебоев во всех браузерах? Whitetru@ya.ru Спасибо.
  • 8 Декабря 2012 14:27
    pontiac358
    можно ли сделать чтоб он автоматически прокручивался, каждые 5 секунд например??
  • 5 Ноября 2013 13:24
    stan07
    Подскажите,пожалуйста, как сделать что бы он бесконечно прокручивался.
  • 13 Января 2014 19:09
    dj_rog
    ужасно реализовано добавление новых элементов в карусель, нет возможности добавить элементы без перезагрузки всей карусельки, что делает невозможной динамическую подгрузку изображений, в связи с чем прходиться все грузить одним разом, весьма печально(
  • 27 Февраля 2015 19:46
    olgastaf
    Очень хороший плагин. Только у меня почему-то в IE не работает. А в Chrome то работает, то не работает. Начинает работать только если меняешь ширину экрата. Как это можно исправить, подскажите, пожалуйста.
  • 14 Декабря 2015 15:26
    vassa
    Отличная вещь. Поставила у себя на сайте. Все хорошо работает. В моем варианте заменяет меню сайта. Спасибо за Ваш труд.
^ Наверх ^