Basic jQuery Image Carousel Plugin

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.