UtilCarousel

Responsive jQuery Carousel Plugin

UtilCarousel 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 are over 9+ ready to use skins/templates, over 24 options, 7 callbacks and 8 developer apis you can build you carousel easily.

How To Use

1. Include jQuery and UtilCarousel files.

To use UtilCarousel, you’ll need to include both jQuery 1.7 or higher and UtilCarousel files. 

<!-- UtilCarousel base css and default theme for control. -->
<link rel="stylesheet" href="utilcarousel/util.carousel.css">

<!-- Include jQuery 1.7+  -->
<script src="js/jquery-1.11.0.min.js"></script>

<!-- Include utilcarousel js file -->
<script src="utilcarousel/jquery.utilcarousel.min.js"></script>
If you want to use the built-in itemAnimation , you will also need to include util.aminate.css.

2. Set up the markup

There are no limit to your markup,the only thing is wrap your child elements(not only div , utilcarousel work with any type element) with '<div class='util-carousel'></div>' . " class='util-carousel' " is not necessary also , plugin will add it auto. 

<div id="carousel-demo" class="util-carousel">
    <div>Any content here!</div>
    <div>Any content here!</div>
    <div>Any content here!</div>
    <div>Any content here!</div>
    ...
</div>

3. Call UtilCarousel

Now you can call UtilCarosel like bellow. 

$(document).ready(function(){
    $('#carousel-demo').utilCarousel();
});

4. Customizing options

There are over 24 options you can config, clike here to see all the options .And  apply it like below. 

$(document).ready(function(){
    $('#carousel-demo').utilCarousel({
        responsiveMode : 'itemWidthRange',
        itemWidthRange : [260, 320]
    });
});  

Options

Variable Default Type Description
showItems 4 int The default displayed items count. When in responsive mode it will be override by responsive setting.
responsive true boolean Set it do enable or disable responsive.
responsiveMode 'breakPoints' string UitlCarouse support tow responsive mode: 'breakPoints' and 'itemWidthRange'.click here to see difference.
breakPoints   array 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   array 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 true boolean Whether show the pagination controls
navigation false boolean Whether show the navigation button controls.
navigationText ['Prev', 'Next'] array The navigation button text. Set it like ['prev','next']
drag true boolean Whether enable drag.
swipe true boolean Whether enable swipe.
mouseWheel false boolean Whether enable mousewheel.
autoPlay false boolean Whether UtilCarousel start autoPlay after init.
interval 3000 int The auto play interval.
rewind true boolean Whether Uticarousel will slide to the first item when there is the end of the item list.
slideSpeed 400 int Slide animation speed in milliseconds.
responsiveSpeed 400 int Item responsive animation(width change) speed in milliseconds.
scrollPageSpeed 600 int Item slide animation speed in milliseconds when click pagination controls.
scrollPerPage false boolean Whether UtilCarouse scroll items per page not per item.
pauseOnHover true boolean Pause the autoplay on mouse hover.
itemAnimation false boolean/string Add css3 animation class to the visable item. If you use built-in animation, make sure include util.animate.css to you page. Then use it like $('#demo').utilCarousel({itemAnimation:'util-fade-in'}); And you can use the animate.css on it like $('#demo').utilCarousel({itemAnimation:'animated bounce'}); click here to see live demo.
lazyLoad false boolean Lazy load images , images will not be loaded before slide to them. To use lazy load of image , you need set it to true, then add class 'img-lazy' and attribute 'data-src' for real image path. like :<img class="img-lazy" data-src="you image path" src="your placeholder img" alt=""/> click here to see live demo.
itemLess 'margin' string 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.click here to see live demo.
responsiveBaseOn window jQuery selector The jQuery element that UtilCarousel will check it's width to apply breakpoints.
responsiveDelay 200 int The small delay of check and do responsive actions.
themeClass 'util-theme-default' string The default UtilCarousel control style class. You can coustom you own control style and set the class here.
itemWidthRangeConflict 'margin' string 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 'maxFirst' string 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. click here to see live demo.

 

Callbacks

There are 7 callbacks you can use in UtilCarousel , like bellow: Click here to see live demo! 

$('#api-demo').utilCarousel({
    beforeInit : function() {
        log('beforeInit callback');
    },
    afterInit : function() {
        log('afterInit callback');
    },
    beforeUpdate : function() {
        log('beforeUpdate callback');
    },
    afterUpdate : function() {
        log('afterUpdate callback');
    },
    indexChanged : function(index) {
        log('indexChanged callback: index changed to ' + index);
    },
    beforeDrag : function() {
        log('beforeDrag callback');
    },
    afterDrag : function() {
        log('afterDrag callback');
    }
});

Methods

Use UtilCarousel methods simply  like bellow, click here to see live demo. 

//Init plugin        
$('#api-demo').utilCarousel();

//Get UtilCarousel Instance
var utilCarouselObj = $('#api-demo').data('utilCarousel');

//Go to previous item
utilCarouselObj.prev();

//Go to next item
utilCarouselObj.next();

//Start autoplay
utilCarouselObj.play();

//Stop autoplay
utilCarouselObj.stop();

//Go to start item
utilCarouselObj.toStart();

//Go to end item
utilCarouselObj.toEnd();

//Go to the specified index, index start with 0
utilCarouselObj.goTo(3);

//Destroy
utilCarouselObj.destroy();

Use Skin/Templates

1.Include the skin css file.

<!-- UtilCarousel base css and default theme for control. -->
<link rel="stylesheet" href="utilcarousel/util.carousel.css">

<!-- Include the skin styleseet -->
<link rel="stylesheet" href="utilcarousel/util.carousel.skins.css">

<!-- Include jQuery 1.7+  -->
<script src="js/jquery-1.11.0.min.js"></script>

<!-- Include utilcarousel js file -->
<script src="utilcarousel/jquery.utilcarousel.min.js"></script>

2. If you want use lightbox as the demo ,you should also include magnific-popup files.

<link rel="stylesheet" href="magnific-popup/magnific-popup.css" />
<script src="magnific-popup/jquery.magnific-popup.js"></script>
Add class = "img-link" to a tag for show large image like bellow: 
<a href="path/your-image.jpg" class="img-link" title="put image description here">open large image in lightbox</a>
Add class = "video-link"  to a tag show  videos (YouTube / Vimeo) like bellow: 
<a href="http://www.youtube.com/watch?v=H1mX8ptsmBM" class="video-link" >open video in lightbox</a>

3. Set up the skin/templates markup

You can config the call options as you like! There is no limit to the options. That's just an example.
SIMPLE IMAGE WITH LIGHTBOX

Markup 

<div class="util-carousel sample-img">
    <!-- Item entity -->
    <div class="item">
        <div class="meida-holder">
            <img src="demo-assets/t1.jpg" alt="" /> <!-- You Image -->
        </div>
        <div class="hover-content">
            <div class="overlay"></div>
            <div class="link-container">
                <a href="#"><i class="icon-link"></i></a> <!-- Detail link -->
                <a href="demo-assets/t1.jpg" class="img-link" title="Sample image 1 description"><i class="icon-search"></i></a><!-- Use lightbox  -->
            </div>
        </div>
    </div>
    <!-- End Item -->
    ... <!-- your other items -->
</div>

Call 

$('.sample-img').utilCarousel({
    responsiveMode : 'itemWidthRange',
    itemWidthRange : [260, 320]
});
Team Showcase

Markup 

<div class="util-carousel team-showcase">
    <!-- Item entity -->
    <div class="item">
        <div class="media-holder">
            <img src="demo-assets/p1.jpg" alt="" />
        </div>
        <div class="social-links">
            <a href="#"><i class="icon-facebook"></i></a>
            <a href="#"><i class="icon-gplus"></i></a>
            <a href="#"><i class="icon-vimeo"></i></a>
            <a href="#"><i class="icon-twitter"></i></a>
            <a href="#"><i class="icon-pinterest"></i></a>
            <a href="#"><i class="icon-vimeo"></i></a>
        </div>
        <div class="detail-container">
            <div class="detail-title">
                John Smith
            </div>
            <div class="detail-subtitle">
                Web Designer
            </div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam massa quis mauris sollicitudin commodo ...
            </p>
        </div>
    </div>
    <!-- End Item -->
    ...<!-- your other items -->
</div>

Call 

$('.team-showcase').utilCarousel({
    responsiveMode : 'itemWidthRange',
    itemWidthRange : [300, 360]
});
Protfolio Skin

Markup 

<div class="util-carousel portfolio-list">
    <!-- Item entity -->
    <div class="item">
        <div class="meida-holder">
            <img src="demo-assets/a1.jpg" alt="" /><!-- You Image -->
            <div class="hover-content">
                <div class="link-container">
                    <a href="demo-assets/a1.jpg" class="img-link"><i class="icon-search"></i></a><!-- Use lightbox  -->
                </div>
            </div>
        </div>
        <div class="detail-container">
            <h4><a href="#">Protfolio Title</a></h4><!-- Detail link -->
            <p>protfolio detail </p>
        </div>
    </div>
    <!-- End Item -->
    ...<!-- your other items -->
</div>

Call 

$('.portfolio-list').utilCarousel({
    breakPosints : [[1200, 4], [992, 3], [768, 2], [480, 1]]
});
Top Nav Skin

Markup 

<div class="util-carousel top-nav-box">
    <!-- Item entity -->
    <div class="item">
        <a href="#"> <img src="demo-assets/2.jpg" alt="" /> <span>TARZAN</span> </a>
    </div>
    <!-- End Item -->
    ...<!-- your other items -->
</div>

Call 

$('.top-nav-box').utilCarousel({
    navigation : true,
    navigationText : ['<i class="icon-left-open-big"></i>', '<i class=" icon-right-open-big"></i>'],
    breakPoints : [[1900, 5], [1200, 4], [992, 3], [768, 2], [480, 1]]
});
Normal Carousel

Markup 

<div class="util-carousel normal-imglist">
    <div class="item">
        <a href="#"><img src="demo-assets/t1.jpg" alt="" /></a>
    </div>
</div>

Call 

$('.normal-imglist').utilCarousel({
    pagination : false,
    navigationText : ['<i class="icon-left-open-big"></i>', '<i class=" icon-right-open-big"></i>'],
    navigation : true
});
Logo Showcase

Markup 

<div class="util-carousel logo-showcase">
    <!-- Item entity -->
    <div class="item">
        <a href="#"><img src="demo-assets/jquery_t.png" alt="" /></a>
    </div>
    <!-- End Item -->
    ... <!-- Other items -->
</div>

Call 

$('.logo-showcase').utilCarousel({
    responsiveMode : 'itemWidthRange',
    itemWidthRange : [200, 210],
});

Markup (gray) 

<div class="util-carousel logo-showcase-gray">
    <!-- Item entity -->
    <div class="item">
        <a href="#"><img src="demo-assets/jquery_t.png" alt="" /></a>
    </div>
    <!-- End Item -->
    ... <!-- Other items -->
</div>

Call (gray) 

$('.logo-showcase-gray').utilCarousel({
    responsiveMode : 'itemWidthRange',
    itemWidthRange : [200, 210],
    interval : 3000,
    autoPlay : true,
    pagination : false
});
Full Width Skin

Markup 

<div class="util-carousel fullwidth">
    <!-- Item entity -->
    <div class="item">
        <div class="meida-holder">
            <img src="demo-assets/t1.jpg" alt="" />
        </div>
        <div class="hover-content">
            <div class="overlay"></div>
            <div class="link-container">
                <a href="#" ><i class="icon-link"></i></a><a href="demo-assets/t2.jpg" class="img-link"><i class="icon-search"></i></a>
            </div>
            <div class="detail-container">
                <h4>UtilCarousel Plugin</h4>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam massa quis mauris  ...
                </p>
            </div>
        </div>
    </div>
    <!-- End Item -->
    ... <!-- Other items -->
</div>

Call 

$('.fullwidth').utilCarousel({
    breakPoints : [[600, 1], [900, 2], [1200, 3], [1500, 4], [1800, 5]],
    mouseWheel : true,
    rewind:false
});
Testimonial Skin

Markup 

<div class="util-carousel testimonial">
    <!-- Item entity -->
    <div class="item">
        <div class="testimonial-content">
            <span class="testimonial-arrow"></span>
            Duis sit amet orci et lectus dictum auctor a nec enim. Donec suscipit fringilla elementum. 
        </div>
        <div class="testimonial-user">
            <div class="testimonial-user-thumb"><img src="demo-assets/p1.jpg" alt="" />
            </div>
            <div class="testimonial-user-name">
                John Smith
            </div>
            <div class="testimonial-user-meta">
                Google Inc
            </div>
        </div>
    </div>
    <!-- Item entity -->
    ... <!-- Other items -->
</div>

Call 

$('.testimonial').utilCarousel({
    showItems : 1,
    breakPoints : [[1920, 1]],
    autoPlay : true
});

Use Lightbox

If you want use lightbox as the demo ,you should also include magnific-popup files.

<link rel="stylesheet" href="magnific-popup/magnific-popup.css" />
<script src="magnific-popup/jquery.magnific-popup.js"></script>
Add class = "img-link" to a tag for show large image like bellow: 
<a href="path/your-image.jpg" class="img-link" title="put image description here">open large image in lightbox</a>
Add class = "video-link"  to a tag show  videos (YouTube / Vimeo) like bellow: 
<a href="http://www.youtube.com/watch?v=H1mX8ptsmBM" class="video-link" >open video in lightbox</a>