Lightweight Carousel Plugin For jQuery - Cycle.js

File Size: 333Kb
Views Total: 5663
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Lightweight Carousel Plugin For jQuery - Cycle.js

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.