Basic jQuery Image Carousel Plugin
File Size: | 1.66 MB |
---|---|
Views Total: | 1782 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Yet another jQuery plugin that provides a simple way to create an image carousel with support of auto play, infinite looping, multiple items in one slide, arrows navigation and more.
Basic Usage:
1. Wrap the images with ul
li
elements in a wrapper.
<div class="demo"> <ul> <li><img src="1.jpg" alt="" /></li> <li><img src="2.jpg" alt="" /></li> <li><img src="3.jpg" alt="" /></li> ... </ul> </div>
2. The required CSS to style the image carousel.
.demo { margin: 0 auto; width: 500px; height: 335px; border: 10px solid #fff; box-shadow: 2px 2px 5px 0 rgba(50, 50, 50, 0.75); position: relative; border-radius: 10px; } .demo ul { margin: 0; padding: 0; list-style: none; z-index: 5; } .demo ul li { list-style: none; } .demo .carousel-button { position: absolute; padding: 10px; top: 150px; height: 20px; width: 20px; background-color: #fff; z-index: 2; text-decoration: none; color: #666; font-weight: bold; } .demo .carousel-button.disabled { display: none; } .demo .carousel-button-prev { left: -30px; border-radius: 50% 0 0 50%; text-align: left; } .demo .carousel-button-prev:hover { left: -35px; } .demo .carousel-button-next { right: -30px; border-radius: 0 50% 50% 0; text-align: right; } .demo .carousel-button-next:hover { right: -35px; }
3. Include jQuery library and jquery.basic-carousel-0.0.1.js
script in the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="jquery.basic-carousel-0.0.1.js"></script>
4. Call the plugin with default options.
<script type="text/javascript"> $(function(){ $('.demo').basicCarousel(); }); </script>
5. Available options to customize the image carousel.
<script type="text/javascript"> $(function(){ $('.demo').basicCarousel({ visibleItems : 1, // set a number of the visible items that you want show animationSpeed : 2000, // set the milliseconds to speed of animation autoPlay : false, autoPlaySpeed : 3000, // set the milliseconds to speed of auto play pauseOnHover : true, marginOfItem : 0, // pixels of the margin of item if exists the margin textPrev : '<', // text to the previous button textNext : '>', // text to the next button showArrows : true, // set false to not show the arrows show_numbers : false, // show page numbers height : 0 // if css height is less than 50px I go change it to 50px}); }); </script>
Change log:
2014-05-09
- add new functions to show page numbers
This awesome jQuery plugin is developed by euricovidal. For more Advanced Usages, please check the demo page or visit the official website.