CSS3 Perspective Carousel

An awesome carousel developed on top of jQuery with bit of witchcraft of CSS3.

View in action here. The slides can also be changed using the arrow keys.

How to install

You can download the lib:

• development version
• minified version

Please, this lib don't have CDN yet, so you need to download and put it in your own site.

How to use

Loading the lib

Like I said, download the package and reference the JavaScript and CSS files manually.

Put the CSS in the head section of your HTML document:

<!-- Required CSS for the Carousel lib -->
<link href="/path/to/carousel.min.css" rel="stylesheet" type="text/css" media="all">

Put the JavaScript before end of body tag:

<!-- Loading and initialize the Carousel lib -->
<script src="/path/to/carousel.min.js"></script>
<script>
    Carousel.init({
        target: $('.carousel')
    });
</script>

Or if you prefer, by way of AMD:

require(['/path/to/carousel.min'], function(Carousel) {
    Carousel.init({
        target: $('.carousel')
    });
});

Everywhere you want a carousel to be placed, add the following markup:

<div class="carousel">
    <ul class="carousel-wrapper">
        <li class="carousel-box">
            <img src="/path/to/img" alt="CSS3 Perspective Carousel">
        </li>
        <li class="carousel-box">
            <img src="/path/to/img" alt="CSS3 Perspective Carousel">
        </li>
        <li class="carousel-box">
            <img src="/path/to/img" alt="CSS3 Perspective Carousel">
        </li>
    </ul>
</div>

##Browser Support

IE 7+ ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

• IE7+ (If used jQuery 1.10.1 or greater). Recalling that in IE's less than 10 transitions do not occur via CSS.

License

The CSS3 Perspective Carousel is licensed under the MIT License.