Lightweight Carousel Plugin For jQuery - Cycle.js
File Size: | 333Kb |
---|---|
Views Total: | 5683 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Cycle.js is a lightweight jquery plugin that make it easier to create a variety of carousel sliders with CSS3 transition effects. It is compatible with all major browsers which support CSS3 transitions attribute.
Basic Usage:
1. Include jQuery Library and Cycle.js
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="src/cycle.js"></script>
2. Include Cycle CSS
<link rel="stylesheet" href="css/cycle.css">
3. Markup (This example will auto-cycle through items with a slide transition.)
<div data-cycle="go" class="cycle slide"> <div class="cycle-inner"> <div class="item"> <img src="http://lorempixel.com/320/240/sports" alt=""> </div> <div class="item"> <img src="http://lorempixel.com/320/240/animals" alt=""> </div> <div class="item"> <img src="http://lorempixel.com/320/240/food" alt=""> </div> </div> </div>
This awesome jQuery plugin is developed by rygine. For more Advanced Usages, please check the demo page or visit the official website.