Clean & Multipurpose jQuery Image Carousel Plugin - Ublue

Ublue is a simple clean yet highly configurable jQuery plugin for creating horizontal & vertical image carousel / sliders that supports autoplay, infinite loop, pager/button navigation, thumbnails and more.

How to use it:

1. Include the jQuery javascript library and jQuery ublue plugin's files in the html document.

<link rel="stylesheet" href="css/ublue_ImageCarousel.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/ublue_ImageCarousel.js"></script>

2. Markup Html structure.

<div class="isCarousel demo">
<div class="focusArea">
<div class="focusCon">

<div class="focusItem">
<h4 class="title"><a href="#">Heading 1</a></h4>
<a href="#"><img src="images/img1.jpg" alt="" /></a> </div>

<div class="focusItem">
<h4 class="title"><a href="#">Heading 2</a></h4>
<a href="#"><img src="images/img2.jpg" alt="" /></a> </div>

<div class="focusItem">
<h4 class="title"><a href="#">Heading 3</a></h4>
<a href="#"><img src="images/img3.jpg" alt="" /></a> </div>

...

</div>
</div>

<div class="focusIndicators"> </div>
</div>

3. Initialize the image carousel with default options.

<script>
$(function() {
$(".demo").ublue_ImageCarousel();	
});
</script>

4. Available options to customize the image carousel.

<script>
$(function() {
$(".demo").ublue_ImageCarousel({
ubArea:'.focusArea',// carousel wrapper
ubCon:'.focusCon', // carousel content
ubItem:'.focusItem', // carousel items
ubIndicators:'.focusIndicators', // pager
ubPrev:'.focusPrev', // prev button
ubNext:'.focusNext', // next button
ubEffect:'left', // 'left' 'top' 'fade' 'leftSeamless' 'topSeamless'
ubTrigger:'hover', // 'hover' or'click'
ubAutoPlay:'on', // autoplay
ubAutoBtn:'on', // auto pager
ubTitleHover:'off', // show title on hover
ubGallery:'off', // show image gallery
ubTime:5000,// autoplay interval
ubSpeed:480,// animation speed
ubTitleSpeed:50// title animation speed
});
});
</script>

---

This awesome jQuery plugin is developed by zhonglimh. For more Advanced Usages, please check the demo page or visit the official website.