Lightweight Content Carousel jQuery Plugin - lightYear
File Size: | 8.52KB |
---|---|
Views Total: | 2584 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.