jQuery.ulSlide

Февраль 9th, 2011 |

Адаптивная (Responsive) «Карусель» (или «Слайдер») которая поддерживает «Slide», «Fade», «HTML5 Rotate», «HTML5 Scale» и «Carousel» эффекты. Отличается гибкостью в использовании, «безопасностью» для HTML вёрстки и простотой.

Поддерживается Responsive дизайн, пред-загрузка, пост-загрузка и Ajax-загрузка контента. А контентом слайда может быть любой HTML.

Если подключить ‘mousewheel’ плагин, то слайдер будет реагировать на колесико мыши (Не забудте установить «mousewheel» опцию в «true»).

Пример использования

<ul id="slide1">
    <li> <img src="images/image-1.jpg" alt="" /></li>
    <li> <img src="images/image-2.jpg" alt="" /></li>
    <li> <img src="images/image-3.jpg" alt="" /></li>
</ul>
<a href="#" id="e1_next"> Next </a>
<a href="#" id="e1_prev"> Previous </a>
<script type="text/javascript">
$(function() {
	$('#slide1').ulslide({
		effect: {
			type: 'slide', // slide, fade, rotate, scale or carousel
			axis: 'y',     // x, y
			distance: 40   // Distance between frames
		},
		duration: 500,
		autoslide: 3000,
		width: 443,
		height: 300,
		mousewheel: true,
		nextButton: '#e1_next',
		prevButton: '#e1_prev'
	});
});
</script>

Настройка плагина

width (integer) (optional)
Ширина. Можно указать в CSS.

height (string) (optional)
Высота. Можно указать в CSS. Если указать как ‘auto’ размер объекта будет подгоняться под размер очередного кадра при их смене.

effect[‘type’] (string) (optional)
Тип эффекта. Может принимать значения ‘slide’, ‘fade’, ‘rotate’, ‘scale’ или ‘carousel’. По умолчанию ‘slide’.

effect[‘axis’] (string) (optional)
Ось для Slide-эффекта. Может принимать значения ‘x’ или ‘y’. По умолчанию ‘x’.

effect[‘showCount’] (string) (optional)
Use ‘showCount’ for carousel. Number. By default ‘x’.

effect[‘distance’] (integer) (optional)
Расстояние между кадрами в пикселях для Slide-эффекта. По умолчанию ’20’.

direction (string) (optional)
Порядок слайдов (направление движения для Slide-эффекта). Может принимать значения ‘f’ или ‘b’. По умолчанию ‘f’.

duration (integer) (optional)
Время смены слайдов в миллисекундах. По умолчанию ‘600’.

autoslide (mixed) (optional)
Интервал автоматической смены кадров в миллисекундах. По умолчанию ‘false’ — авто смена кадров отключена.

current (integer) (optional)
Номер кадра, с которого необходимо начать. По умолчанию ‘0’ — первый слайд.

statusbar (boolean) (optional)
При значении ‘true’ в момент загрузки картинок элементу будет добавлен класс «usl-loading». По умолчанию ‘true’.

lazyload (boolean) (optional)
Загрузка картинок внутри слайда в момент его открытия. По умолчанию ‘false’.

ajax (boolean) (optional)
Загрузка содержимого слайда при помощи ajax. URL будут взяты из «pager». По умолчанию ‘false’.

pager (selector) (optional)
Селектор на множество элементов <a>, которые будут открывать соответствующий слайд.

nextButton (selector) (optional)
Селектор кнопки «следующий слайд».

prevButton (selector) (optional)
Селектор кнопки «предыдущий слайд».

printCurrentTo (selector) (optional)
Элемент для отображения текущего номера слайда. (если нужно)

mousewheel (boolean) (optional)
Если «mousewheel» плагин подключен, то слайдер будет реагировать на колесико мыши.

onAnimate (function(settings, thisEl)) (optional)
Событие смены кадра.

onAnimateStart (function(settings, thisEl)) (optional)
Событие перед сменой кадра.

Перейти: