Lightweight jQuery Crossfading Image Carousel Plugin - Evanescent

File Size: 2.87 MB
Views Total: 1773
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Lightweight jQuery Crossfading Image Carousel Plugin - Evanescent

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">
      <img src="">
      <img src="">
      <img src="">
      <img src="">
      <img src="">
  <div class="pagination">
    <span class="dots"></span>

3. Include jQuery library and the jQuery Evanescent plugin at the bottom of the webpage.

<script src="//"></script>
<script src="evanescent.min.js"></script>

4. Initialize the plugin like so.


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

// Stop the carousel

// Go to the next slide;

// Go to the previous slide

// Go to the third slide

Change log:



This awesome jQuery plugin is developed by ketsugi. For more Advanced Usages, please check the demo page or visit the official website.