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