Easy Clean jQuery Content Carousel Plugin - Chechu Carousel

Easy Clean jQuery Content Carousel Plugin - Chechu Carousel
File Size: 34.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.