Clean & Multipurpose jQuery Image Carousel Plugin - Ublue
File Size: | 873 KB |
---|---|
Views Total: | 3587 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.