Lightweight jQuery Crossfading Image Carousel Plugin - Evanescent
File Size: | 2.87 MB |
---|---|
Views Total: | 1770 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Evanescent is a lightweight jQuery plugin to create a automatic, customizable, responsive, crossfading image carousel on your webpage.
How to use it:
1. Include the evanescent.css in the head section of the web page.
<link rel="stylesheet" href="evanescent.css">
2. Insert a list of images and a dots navigation into the container 'evanescent-container'.
<div class="evanescent-container"> <ul id="evanescent"> <li> <img src="https://unsplash.it/2000/800?image=655"> </li> <li> <img src="https://unsplash.it/2000/800?image=646"> </li> <li> <img src="https://unsplash.it/2000/800?image=654"> </li> <li> <img src="https://unsplash.it/2000/800?image=653"> </li> <li> <img src="https://unsplash.it/2000/800?image=652"> </li> </ul> <div class="pagination"> <span class="dots"></span> </div> </div>
3. Include jQuery library and the jQuery Evanescent plugin at the bottom of the webpage.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="evanescent.min.js"></script>
4. Initialize the plugin like so.
$('#evanescent').evanescent({ // OPTIONS HERE });
5. Options and defaults.
// Loop the carousel loop: true, // tart playing immediately autoplay: true, // dots navigation dots: { // Show pagination dots show: false, // The selector for the element to contain the pagination dots element: '.dots', // The class for an inactive page inactiveClass: 'inactive', // The class for the current page activeClass: 'active' }, // Speed of the crossfade, in milliseconds animationSpeed: 1000, // The duration of each slide, in milliseconds slideDuration: 8000, // Pause when the mouse is hovering over the carousel pauseOnHover: true, // Callback function when a slide is complete slideComplete: false, // Callback function when the last slide is complete carouselComplete: false
6. Public methods to control the image carousel manually.
carousel = $('#evanescent').data('evanescent'); // Start the carousel carousel.start(); // Stop the carousel carousel.stop(); // Go to the next slide carousel.next(); // Go to the previous slide carousel.prev(); // Go to the third slide carousel.goTo(3);
Change log:
2015-07-24
This awesome jQuery plugin is developed by ketsugi. For more Advanced Usages, please check the demo page or visit the official website.