Lightweight Content Carousel jQuery Plugin - lightYear

lightYear is a really simple jQuery slider plugin for creating a circular content carousel that supports infinite sliding with easing effects.

Basic Usage:

1. Wrap your slide content in a wrapper.

<div id="lightYear">
<div id="navPrev">prev</div>
<div id="lightYearContain">
<ul class="cf">
<li id="first"><a href="#">slide one</a></li>
<li id="second"><a href="#">slide two</a></li>
<li id="third"><a href="#">slide three</a></li>
<li id="fourth"><a href="#">slide four</a></li>
<li id="fifth"><a href="#">slide five</a></li>
</ul>
</div>
<div id="navNext">next</div>
</div>

2. The sample CSS to style the carousel.

#lightYear {
width: 400px;
height: 300px;
overflow: hidden;
position: relative;
}
#lightYearContain {
width: 400px;
height: 300px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
#lightYearContain ul {
position: relative;
list-style-type: none;
margin: 0px;
padding: 0px;
height: 300px;
}
#lightYearContain ul li {
float: left;
width: 400px;
height: 190px;
padding-top: 110px;
}
#lightYearContain ul li a {
color: #FFFFFF;
text-decoration: none;
text-align: center;
font-size: 42px;
display: block;
}
#navPrev, #navNext {
position: absolute;
top: 0;
overflow: hidden;
display: block;
cursor: pointer;
overflow: hidden;
text-indent: 101%;
white-space: nowrap;
z-index: 5000;
background-color: #DDDDDD;
height: 300px;
width: 40px;
}
#navPrev:after, #navNext:after {
content: '';
display: block;
position: absolute;
top: 130px;
cursor: pointer;
}
}
#navPrev {
left: 0;
}
#navPrev:after {
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
border-right: 11px solid #000000;
width: 0;
height: 0;
left: 15px;
}
#navNext {
right: 0;
}
#navNext:after {
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
border-left: 11px solid #000000;
width: 0;
height: 0;
left: 15px;
right: 15px;
}
#first {
background: #000000;
}
#second {
background: #333333;
}
#third {
background: #666666;
}
#fourth {
background: #999999;
}
#fifth {
background: #CCCCCC;
}
.cf:before,  .cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
.cf {
 *zoom: 1;
}

3. Include the latest version of jQuery library and jQuery lightYear plugin on the page.

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

4. Include required jQuery easing plugin for easing functions.

<script src="jquery.easing-1.3.js"></script> 

5. Initialize the content carousel with options.

<script>
$('#lightYear').lightYear({
'animationDuration' : 500,   //milliseconds
'slideEasing' : 'swing',     //default options are swing or linear
'autoSlide' : true,          //wait for use interaction?
'waitTime' : 4000,           //duration of pause between shlides
'slideContainer' : 'lightYearContain',   //id that holds JUST the ul for the slides
'navNext' : 'navNext',       //id for next button
'navPrev' : 'navPrev'        //id for prev button
});
</script>

---

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