Tiny jQuery Image Slider / Slideshow With Caption Support

Yet another jQuery based image carousel component that features autoplay, image captions, configurable animation speed and crossfade transition effects.

How to use it:

1. Add your own images together with descriptions and navigation arrows to the slider.

<div id="slider-container">
  <img src="img/left-arrow.png" id="prev">
  <ul id="slider">
    <li class="slide">
      <div class="slide-copy">
        <h2>Slide One</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
      </div>
      <img src="img/1.jpg" alt="">
    </li>
    <li class="slide">
      <div class="slide-copy">
        <h2>Slide Two</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
      </div>
      <img src="img/2.jpg" alt="">
    </li>
    <li class="slide">
      <div class="slide-copy">
        <h2>Slide Three</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
      </div>
      <img src="img/3.jpg" alt="">
    </li>
  </ul>
  <img src="img/right-arrow.png" id="next">     
</div>

2. Style the slider using your own CSS as follows:

#slider-container {
  height: 600px;
  margin: 0 auto;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  width: 800px;
}

#sldier {
  height: 100%;
  width: 100%;
}

#slider .slide img {
  height: 100%;
  width: auto;
}

#prev, #next {
  cursor: pointer;
  max-width: 60px;
  opacity: 0;
  position: absolute;
  top: 45%;
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  z-index: 999;
}

#prev { left: 0; }

#next { right: 0; }

#slider-container:hover #prev, #slider-container:hover #next { opacity: .7; }

.slide {
  position: absolute;
  width: 100%;
}

.slide-copy {
  background: #777;
  background: rgba(0, 0, 0, .5);
  bottom: 0;
  color: #fff;
  left: 0;
  padding: 20px;
  position: absolute;
}

3. Put the needed jQuery library at the end of the html document.

<script src="//code.jquery.com/jquery.min.js"></script>

4. The core JavaScript.

$(document).ready(function() {

  var options = {
    speed: 500,
    autoswitch: true,
    autoswitch_speed: 4500
  }

  // Add active class to the first slide
  $('.slide').first().addClass('active');

  // Hide all slides
  $('.slide').hide();

  // Show active slide
  $('.active').show();

  // Click event on #next
  $('#next').on('click', nextSlide);

  // Click event on #prev
  $('#prev').on('click', prevSlide);

  // Auto slider
  if (options.autoswitch === true) {
    setInterval(nextSlide, options.autoswitch_speed);
  }

  function nextSlide() {
    $('.active').removeClass('active').addClass('prevActive');    // remove active class and add prevActive class

    if ($('.prevActive').is(':last-child')) {   // if last slide, add active class to the first slide
      $('.slide').first().addClass('active');
    } else {                    // else, add active class to next slide
      $('.prevActive').next().addClass('active');
    }

    $('.prevActive').removeClass('prevActive');   // remove prevActive class after active class is added
    $('.slide').fadeOut(options.speed);       // fade out the current slide
    $('.active').fadeIn(options.speed);       // fade in the new slide
  }

  function prevSlide() {
    $('.active').removeClass('active').addClass('prevActive');    // remove active class and add prevActive class

    if ($('.prevActive').is(':first-child')) {    // if last slide, add active class to the first slide
      $('.slide').last().addClass('active');
    } else {                    // else, add active class to next slide
      $('.prevActive').prev().addClass('active');
    }
    
    $('.prevActive').removeClass('prevActive');   // remove prevActive class after active class is added
    $('.slide').fadeOut(options.speed);       // fade out the current slide
    $('.active').fadeIn(options.speed);       // fade in the new slide    
  }

});

---

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