Util Carousel - Utility responsive jquery carousel plugin

Aug 12, 2014 in Slideshow 6825 views

Download

Overview
Documents

User Rating: 3/5 ( 2 votes)

Your Rating:

Util Carousel is a fully responsive jQuery carousel plugin with super smooth hardware accelerated transitions.It is responsive witch support both ‘breakpoints’ and ‘itemwidthrange’. And it is touch-enabled with css3 3d hardware acceleration, so it is super smooth both on desktop and mobile. Touch, drag, pagination control, navigation control, mousewheel are all enable to navigate UtilCarousel. There areover 9+ ready to use skins/templates, over 24 options, 7 callbacks and 8 developer apis you can build you carousel easily.

Features

Fully responsive in tow mode: breakpoints and item width range.
Super smooth hardware accelerated CSS3 transitions with jQuery fallback.
Touch , drag , mousewheel , pagination , navigation all enable.
9+ builded in modern skins , ready to use and easy to customize!
Touch-enable ,Works in IE7+(the skins work on ie8+) and on Android and iPhone
Over 24 plugin options.
Developer aip and callbacks.
Unlimited carousels that can have any content.
Advanced options for responsive (itemless,itemWidthRangeConflict,rangeCaculate).
Autoplay supported.
Scroll per page supported.
Rewind carousel items supported.
Options for customize animate speed.
Lightbox to show image and videos(YouTube / Vimeo).
SEO friendly, content is not hidden.
Free support and updates.
Step-by-step guide to help you with usage and customization.
New : Add CSS3 animation to item.
New : Support image lazy load.
And more …

Source: codecanyon.net

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="util.carousel.skins.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.utilcarousel.js?r=1.2"></script>

2. HTML

<div id="normal-imglist" class="util-carousel">
	<div class="item">
		<a href="#"><img src="assets/images/t1.jpg" alt="" /></a>
	</div>
	<div class="item">
		<a href="#"><img src="assets/images/t2.jpg" alt="" /></a>
	</div>
	<div class="item">
		<a href="#"><img src="assets/images/t3.jpg" alt="" /></a>
	</div>
	<div class="item">
		<a href="#"><img src="assets/images/t4.jpg" alt="" /></a>
	</div>
	<div class="item">
		<a href="#"><img src="assets/images/t5.jpg" alt="" /></a>
	</div>
</div>

3. JAVASCRIPT

$('#normal-imglist').utilCarousel({
	mouseWheel : false,
	rewind : true,
	autoPlay : true,
	pagination : false
});

4. OPTIONS

Variable	Description
showItems	The default displayed items count. When in responsive mode it will be override by responsive setting.
responsive	Set it do enable or disable responsive.
responsiveMode	UitlCarouse support tow responsive mode: 'breakPoints' and 'itemWidthRange'.
breakPoints	The breakPoints and showItems when responsiveMode in 'breakPoints' Mode. Use it like [[480, 1], [768, 2], [992, 3], [1200, 4]] , means when the element (responsiveBaseOn option, default:window)'s width <= 480 show 1 item, when it<=768 show 2 item, when it <= 992 show 3 item, etc ...
itemWidthRange	The item width range when responsiveMode in 'itemWidthRange'. Use it like [200, 400],means UtilCarousel will keep the item's width between 200px to 400px and auto caculate how many items to show.
pagination	Whether show the pagination controls
navigation	Whether show the navigation button controls.
navigationText	The navigation button text. Set it like ['prev','next']
drag	Whether enable drag.
mouseWheel	Whether enable mousewheel.
autoPlay	Whether UtilCarousel start autoPlay after init.
interval	The auto play interval.
rewind	Whether Uticarousel will slide to the first item when there is the end of the item list.
slideSpeed	Slide animation speed in milliseconds.
responsiveSpeed	Item responsive animation(width change) speed in milliseconds.
scrollPageSpeed	Item slide animation speed in milliseconds when click pagination controls.
scrollPerPage	Whether UtilCarouse scroll items per page not per item.
pauseOnHover	Pause the autoplay on mouse hover.
itemAnimation	Add css3 animation class to the visable item. If you use built-in animation, make sure include util.animate.css to you page.
lazyLoad	Lazy load images , images will not be loaded before slide to them. To use lazy load of image .
itemLess	What does UtilCarousel do when there are less items to show. 'margin': add margin to the items (the items will be centered). 'scaleUp': the items well be scale up to flat the container.
responsiveBaseOn	The jQuery element that UtilCarousel will check it's width to apply breakpoints.
responsiveDelay	The small delay of check and do responsive actions.
themeClass	The default UtilCarousel control style class. You can coustom you own control style and set the class here.
itemWidthRangeConflict	How does UtilCarousel do when there is an conflict with the item range and the container width. For example the container's width is 1000 and you set the itemWidthRange [399, 400]. So there are no with between 399 ~ 400 that can flat ( n * 399~400 = 1000 , n is the integer value that will show items count ). There are tow value, 'ajust' and 'margin'.'ajust' will ignore the itemWidthRange limit to flat the container. 'margin' will and margin to the item to flat the container.
rangeCaculate	About the itemWidthRange witch is the prefer width. 'minFirst' means the displayed items count caculate base on the min value of itemWidthRange then do ajust. 'maxFirst' means the displayed items count caculate base on the max value of itemWidthRange then do ajust.

JS Tutorial

Util Carousel - Utility responsive jquery carousel plugin

Features

Related Articles