Download
User Rating: 3.9/5 ( 3 votes)
CSS3 Perspective Carousel is an awesome carousel developed on top of jQuery with bit of witchcraft of CSS3.
Browser Support
-
IE7+ (If used jQuery 1.10.1 or greater). Recalling that in IE's less than 10 transitions do not occur via CSS.
-
Opera
-
Google Chrome
-
Safari
-
Firefox
Source: github.com
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="assets/js/carousel.js"></script>
2. HTML
<div class="carousel">
<ul class="carousel-wrapper">
<li class="carousel-box left">
<img src="assets/img/img1.jpg" alt="CSS3 Perspective Carousel">
</li>
<li class="carousel-box is-active">
<img src="assets/img/img2.jpg" alt="CSS3 Perspective Carousel">
</li>
<li class="carousel-box right">
<img src="assets/img/img3.jpg" alt="CSS3 Perspective Carousel">
</li>
<li class="carousel-box">
<img src="assets/img/img4.jpg" alt="CSS3 Perspective Carousel">
</li>
<li class="carousel-box">
<img src="assets/img/img5.jpg" alt="CSS3 Perspective Carousel">
</li>
<li class="carousel-box">
<img src="assets/img/img6.jpg" alt="CSS3 Perspective Carousel">
</li>
<li class="carousel-box">
<img src="assets/img/img7.jpg" alt="CSS3 Perspective Carousel">
</li>
<li class="carousel-box">
<img src="assets/img/img8.jpg" alt="CSS3 Perspective Carousel">
</li>
</ul>
</div>
3. JAVASCRIPT
(function() {
Carousel.init({
target: $('.carousel')
});
})();
JS Tutorial
