jquery.liquidCarousel.js

Basic setting

1
2
3
4

1
2
3
4

Prev
Next

$('#sample1-1').liquidCarousel({
    listSelector:           '.ui-carousel-list'
,   itemSelector:           '.ui-carousel-item'
,   paginationListSelector: '.ui-carousel-paginationList'
,   paginationItemSelector: '.ui-carousel-paginationItem'
,   prevSelector:           '.ui-carousel-prev'
,   nextSelector:           '.ui-carousel-next'
});

autoPlay: true , pos_x: 'center'

1
2
3
4

1
2
3
4

Prev
Next

$('#sample1-2').liquidCarousel({
    pos_x: 'center'
,   autoPlayInterval: 2000
,   autoPlayStartDelay: 0
,   autoPlay: true
,   autoPlayHoverStop: true
});

easing: 'linear' , pos_x: 'right'

1
2
3
4

1
2
3
4

Prev
Next

$('#sample1-3').liquidCarousel({
    pos_x: 'right'
,   easing: 'linear'
,   speed: 4000
,   autoPlayInterval: 0
,   autoPlayStartDelay: 1000
,   autoPlay: true
});

animate: 'fade'

1
2
3
4

1
2
3
4

Prev
Next

$('#fade').liquidCarousel({
    animate: 'fade'
,   speed: 1500
,   currentClass: 'nonHighlight'
});

loop: false

1
2
3
4

1
2
3
4

Prev
Next

$('#sample2-1').liquidCarousel({
    loop: false
});

loopingDisabled: true

1
2
3
4

1
2
3
4

Prev
Next

$('#sample2-2').liquidCarousel({
    speed: 0
,   loop: false
,   loopingDisabled: true
});

group: 3 , loop: false

1
2
3
4
5
6
7
8
9
10
11

1
2
3
4

Prev
Next

$('#sample2-3').liquidCarousel({
    loop: false
,   group: 3
});

group: 3 , loop: true

1
2
3
4
5
6
7
8
9
10
11

1
2
3
4

Prev
Next

$('#sample2-4').liquidCarousel({
    group: 3
});

#sample3 vertical: true

1
2
3
4

1
2
3
4

Prev
Next

$('#sample3').liquidCarousel({
    vertical: true
});

Outside the scope of #sample3 control

1
2
3
4

Prev
Next

3つめを表示

#sample3 index:

(function () {
	var self = $('#sample3').data('carousel')
	,   control = $('#sample3-control')
	,   paginationItem = control.find($('.ui-carousel-paginationItem'))
	;

	paginationItem.on('click', function(e){
		self.moveBind(paginationItem.index(this) * self.group);
		e.preventDefault();
	});

	control.find($('.ui-carousel-prev')).on('click', function(e){
		self.moveBind(self.index - self.group, this);
		e.preventDefault();
	});

	control.find($('.ui-carousel-next')).on('click', function(e){
		self.moveBind(self.index + self.group, this);
		e.preventDefault();
	});

	control.find($('.ui-carousel-setNum')).on('click', function(e){
		self.moveBind(2, this);
		e.preventDefault();
	});
})();

番号表示

1
2
3
4

1
2
3
4

Prev
Next

a / a

$('#sample4').liquidCarousel({
	pos_x: 'center'
	,autoPlayInterval: 2000
	,autoPlayStartDelay: 0
	,autoPlay: true
	,autoPlayHoverStop: true
});
$('#sample4').each(function () {
	var $this = $(this)
		,self = $this.data('carousel')
		,$showCurrentNoArea = $this.find('#sample4-showCurrentNoArea')
		,$showItemLengthArea = $this.find('#sample4-showItemLengthArea')
		,ltemLength = self.$item.length
		;

	function _init () {
		$showItemLengthArea.text(ltemLength);
		_setIndex();
		_eventify();
	}
	function _setIndex () {
		$showCurrentNoArea.text(self.index + 1);
	}
	function _eventify () {
		$this.on('carousel:moveend', function(e){
			_setIndex();
		});
	}
	_init ();
});