Evanescent

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