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:
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.