# Evanescent

- ### Light-weight

  Evanescent is small. At only 3KB it’ll hardly add any weight to your project.

- ### Customisable

  Use CSS to control your carousel’s layout and control the appearance of the (optional) pagination indicators.

- ### Controllable

  Using jQuery’s data method you can control the progress of your carousel from anywhere else on your page.

Get Evanescent

# A basic demonstration

1. ## 1. Include jQuery and Evanescent

   <script src="//path/to/jquery.min.js"></script>
   <script src="//path/to/evanescent.min.js"></script>

2. ## 2. Set up the carousel HTML

   <ul id="evanescent">
   <li><img src="slides/1.JPG"></li>
   <li><img src="slides/2.JPG"></li>
   <li><img src="slides/3.JPG"></li>
   <li><img src="slides/4.JPG"></li>
   <li><img src="slides/5.JPG"></li>
   </ul>

3. ## 3. Include the CSS file

   <link rel="stylesheet" href="//path/to/evanescent.css" type="text/css">

4. ## 4. Initialise Evanescent

   <script type="text/javascript">
   $('#evanescent').evanescent();
   </script>

# Options

The option values shown here are the defaults used if not specified
<script type="text/javascript">
$('#evanescent').evanescent({
loop: true, Loop the carousel?
autoplay: true, Start playing immediately?
dots: {
show: false, Show pagination dots?
element: '.dots', The selector for the element to contain the pagination dots
inactiveClass: 'inactive', The class for an inactive page
activeClass: 'active' The class for the current page
},
animationSpeed: 1000, Speed of the crossfade, in milliseconds
slideDuration: 8000, The duration of each slide, in milliseconds
pauseOnHover: true, Pause when the mouse is hovering over the carousel
slideComplete: false Callback function when a slide is complete
carouselComplete: false Callback function when the last slide is complete
});
</script>

# The data method

You can use jQuery's data method to control the carousel.
<script type="text/javascript">
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);
</script>
twitter email github