Easy Clean jQuery Content Carousel Plugin - Chechu Carousel

Chechu Carousel is a lightweight and simple jQuery/Zepto plugin for creating a carousel/slider that allows to cycle through Html contents with smooth sliding effects. Featuring autoplay, pagination dots, arrows navigation, image loader and more. 

How to use it:

1. Include the jQuery/Zepto library and jQuery chechu carousel plugin in the footer so the page load faster.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="src/ChechuCarousel.js"></script>

2. Create an image carousel using the Html structure as follows.

<div id="demo">
<div id="carousel-wrapper" class="carousel-window">
<ul>
<li> <a href="#"> <img src="1.jpg" alt="1"> </a> </li>
<li> <a href="#"> <img src="2.jpg" alt="2"> </a> </li>
<li> <a href="#"> <img src="3.jpg" alt="3"> </a> </li>
</ul>
<div id="loading"> <img src="img/loader.gif"> </div>
<div class="arrowLeft"><</div>
<div class="arrowRight">></div>
</div>
<div class="pagination"></div>
</div>
</div>

3. Add the following styles in your exist CSS file.

.carousel-window {
position: relative;
overflow: hidden;
margin: 0 auto;
width: 300%;
min-height: 250px;
position: relative;
padding: 0;
background: #fff
}
.carousel-window ul {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
-webkit-transition: -webkit-transform 1s ease-in-out;
-moz-transition: -moz-transform 1s ease-in-out;
-ms-transition: -ms-transform 1s ease-in-out;
-o-transition: -o-transform 1s ease-in-out;
transition: transform 1s ease-in-out
}
.carousel-window li {
margin: 0;
padding: 0;
float: left;
}
.carousel-window li a img {
height: 100%;
width: 100%;
-webkit-background-size: cover;
background-size: cover
}
.arrowLeft, .arrowRight {
font-size: 25px;
color: #fff;
margin-left: 0;
position: relative;
top: 37%;
padding: 13px;
background-color: #000;
cursor: pointer;
display: none
}
.arrowLeft {
float: left
}
.arrowRight {
float: right
}
.pagination ul {
position: static;
margin: 0;
padding: 5px;
text-align: center;
list-style: none
}
.pagination li {
position: static;
float: none;
display: inline;
margin: 0 10px;
padding: 0;
width: auto;
height: auto;
background: none
}
.pagination a {
display: inline-block;
padding: 0;
outline: 0;
width: 10px;
height: 10px;
text-decoration: none;
text-indent: -10000px;
cursor: pointer;
}
.pagination a span {
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #ccc;
display: block
}
.pagination .on a {
cursor: default
}
.pagination .on span {
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #000;
display: block
}
#loading {
position: absolute;
left: 43%;
top: 36%;
display: none
}

4. Call the plugin with default parameters.

<script>
$(document).ready(function() {
$('#demo').ChechuCarousel();
});
</script>

5. Options and defaults.

<script>
$(document).ready(function() {
$('#demo').ChechuCarousel({
autoplay:true,
pagination:true,
arrows:true,
duration:4000
});
});
</script>

Change log:

2014-04-12

• New: transition effect goes horizontal or vertical ( css method)

2014-04-08

• Add responsive layout support.
• Added some css styles with gradient background for arrows and dots.
• Fix: event (touchmove) is executed after the touchstart event end before touchend event in some devices.

---

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