Simple Carousel

Simple Carousel for your websites.

by ondrejd

HTML

<!-- First -->
<div>
	<h2>First</h2>
	<div class="entry-carousel" 
         data-itemWidth="200" 
         data-currentIndex="1">
		<div class="buttons left">
			<span class="prev-btn">&lt;</span>
		</div>
		<div class="slides center">
			<ul>
				<li><div class="slide slide1">&nbsp;</div></li>
				<li><div class="slide slide2">&nbsp;</div></li>
				<li><div class="slide slide3">&nbsp;</div></li>
				<li><div class="slide slide4">&nbsp;</div></li>
				<li><div class="slide slide5">&nbsp;</div></li>
			</ul>
		</div>
		<div class="buttons right">
			<span class="next-btn">&gt;</span>
		</div>
	</div>
</div>
<!-- Second -->
<div>
	<h2>Second</h2>
	<div class="entry-carousel" 
         data-itemWidth="200" 
         data-currentIndex="1">
		<div class="buttons left">
			<span class="prev-btn">&lt;</span>
		</div>
		<div class="slides center">
			<ul>
				<li><div class="slide slide1">&nbsp;</div></li>
				<li><div class="slide slide2">&nbsp;</div></li>
				<li><div class="slide slide3">&nbsp;</div></li>
			</ul>
		</div>
		<div class="buttons right">
			<span class="next-btn">&gt;</span>
		</div>
	</div>
</div>
<!-- Third -->
<div>
	<h2>Third</h2>
	<div class="entry-carousel" 
         data-itemWidth="200" 
         data-currentIndex="1">
		<div class="buttons left">
			<span class="prev-btn">&lt;</span>
		</div>
		<div class="slides center">
			<ul>
				<li><div class="slide slide1">&nbsp;</div></li>
				<li><div class="slide slide2">&nbsp;</div></li>
				<li><div class="slide slide3">&nbsp;</div></li>
				<li><div class="slide slide4">&nbsp;</div></li>
			</ul>
		</div>
		<div class="buttons right">
			<span class="next-btn">&gt;</span>
		</div>
	</div>
</div>

CSS

/* CAROUSEL */
 .entry-carousel {
    width: 280px;
    /*200+40+40*/
    height: 60px;
    margin: 0px auto 0px auto;
}
.entry-carousel .left, .entry-carousel .right {
    position: relative;
    top: 0px;
    bottom: 0px;
    width: 40px;
    height: 60px;
    display: block;
    float: left;
}
.entry-carousel .left {
    left: 0px;
}
.entry-carousel .right {
    right: 0px;
}
.entry-carousel .center {
    overflow: hidden;
    position: relative;
    width: 200px;
    height: 60px;
    float: left;
}
.entry-carousel .slides ul {
    position: relative;
    left: 0;
    top: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 999750px;
}
.entry-carousel .slides ul li {
    width: 200px;
    height: 60px;
    float: left;
}
.entry-carousel .buttons span {
    cursor: pointer;
    display: block;
    width: 40px;
    height: 40px;
    font-weight: 600;
    text-align: center;
    padding-top: 20px;
}
.entry-carousel .buttons .prev-btn {
}
.entry-carousel .buttons .next-btn {
}
/* These represents our "images" in carousels: */
 .slide {
    width: 200px;
    height:60px;
}
.slide1 {
    background-color: #000;
}
.slide2 {
    background-color: #222;
}
.slide3 {
    background-color: #444;
}
.slide4 {
    background-color: #666;
}
.slide5 {
    background-color: #888;
}

JavaScript

// ---------------------------------------------------------------
// Minified Carousel.js
function Carousel(a){this.elm=a,this._move=function(a){a=0==a?"0px":"-"+a+"px",jQuery(".slides ul",this.elm).animate({left:a},600,"swing")}}Carousel.prototype={getWidth:function(){return parseInt(jQuery(this.elm).attr("data-itemWidth"))},getCount:function(){return jQuery(".slides ul li",this.elm).size()},getCurrent:function(){return parseInt(jQuery(this.elm).attr("data-currentIndex"))},setCurrent:function(a){jQuery(this.elm).attr("data-currentIndex",a)},moveNext:function(){var a=this.getCurrent();a=a==this.getCount()?1:a+1,this.setCurrent(a);var b=this.getWidth(),c=a*b-b;this._move(c)},movePrev:function(){var a=this.getCurrent();a=1==a?this.getCount():a-1,this.setCurrent(a);var b=this.getWidth(),c=a*b-b;this._move(c)}};
// ---------------------------------------------------------------
// Your code on the site:
jQuery(document).ready(function () {
    // Carousel prev button
    jQuery(".prev-btn").click(function () {
        (new Carousel(jQuery(this).parent().parent())).movePrev();
    });
    // Carousel next button
    jQuery(".next-btn").click(function () {
        (new Carousel(jQuery(this).parent().parent())).moveNext();
    });
});