Coverflow-Style Image Carousel Plugin For jQuery - Carousel Evolution
File Size: | 1.02 MB |
---|---|
Views Total: | 18910 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

An easy-to-use jQuery plugin to create an infinitely looping image carousel/slideshow with mouse wheel support, a little similar to the familiar 'cover flow' effect.
How to use it:
1. Include the jQuery Carousel Evolution plugin after jQuery library.
<link rel="stylesheet" href="style/carousel.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="scripts/jquery.carousel-1.1.min.js"></script>
2. Include the jQuery mousewheel plugin for mouse wheel support.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.min.js"></script>
3. Markup Html structure.
<div class="carousel"> <div class="slides"> <div class="slideItem"> <a href="#"> <img src="images/slide-1.jpg"> </a> <div class="shadow"> <div class="shadowLeft"></div> <div class="shadowMiddle"></div> <div class="shadowRight"></div> </div> </div> <div class="slideItem"> <a href="#"> <img src="images/slide-2.jpg"> </a> <div class="shadow"> <div class="shadowLeft"></div> <div class="shadowMiddle"></div> <div class="shadowRight"></div> </div> </div> <div class="slideItem"> <a href="#"> <img src="images/slide-3.jpg"> </a> <div class="shadow"> <div class="shadowLeft"></div> <div class="shadowMiddle"></div> <div class="shadowRight"></div> </div> </div> </div> </div>
4. Call the plugin on the container element.
$(document).ready(function(){ $('.carousel').carousel({ carouselWidth:930, carouselHeight:330, directionNav:true, shadow:true, buttonNav:'bullets' }); });
5. All the default settings.
hAlign: 'center', vAlign: 'center', hMargin: 0.4, vMargin: 0.2, frontWidth: 400, frontHeight: 300, carouselWidth: 1000, carouselHeight: 360, left: 0, right: 0, top: 0, bottom: 0, backZoom: 0.8, slidesPerScroll: 5, speed: 500, buttonNav: 'none', directionNav: false, autoplay: true, autoplayInterval: 3000, pauseOnHover: true, mouse: true, shadow: false, reflection: false, reflectionHeight: 0.2, reflectionOpacity: 0.5, reflectionColor: '255,255,255', description: false, descriptionContainer: '.description', backOpacity: 1, before: function(carousel) {}, after: function(carousel) {}
This awesome jQuery plugin is developed by eondcom. For more Advanced Usages, please check the demo page or visit the official website.