Create A Basic Automatic Slideshow/Carousel with jQuery

A simple jQuery content slider plugin which allows you to present any content (e.g. text, images) in an auto-fading & infinite slideshow (Carousel).

How to use it:

1. Insert images & text into the slideshow with follows.

<div id="slider">
  <div class="slide">
    <div class="slide-copy">
      <h2>Slide One</h2>
      <p>Text content here</p>
    </div>
    <img src="img/slide1.jpg" class="active"> </div>
  <div class="slide">
    <div class="slide-copy">
      <h2>Slide Two</h2>
      <p>Text content here</p>
    </div>
    <img src="img/slide2.jpg"> </div>
  <div class="slide">
    <div class="slide-copy">
      <h2>Slide Three</h2>
      <p>Text content here</p>
    </div>
    <img src="img/slide3.jpg"> </div>
  <div class="slide">
    <div class="slide-copy">
      <h2>Slide Four</h2>
      <p>Text content here</p>
    </div>
    <img src="img/slide4.jpg"> </div>
  <div class="slide">
    <div class="slide-copy">
      <h2>Slide Five</h2>
      <p>Text content here</p>
    </div>
    <img src="img/slide5.jpg"> </div>
</div>

2. Create a next/prev navigation for the slideshow.

<img src="img/arrow-left.png" alt="Previous" id="prev">
<img src="img/arrow-right.png" alt="Next" id="next">

3. The basic slideshow styles.

#slider {
  width: 940px;
  height: 350px;
  overflow: hidden;
  float: left;
  padding: 3px;
  border: #666 solid 2px;
  border-radius: 5px;
}

#slider img {
  width: 940px;
  height: 350px;
}

.slide { position: absolute; }

.slide-copy {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 20px;
  background: 7f7f7f;
  background: rgba(0,0,0,0.5);
}

#prev,
#next {
  float: left;
  margin-top: 130px;
  cursor: pointer;
  position: relative;
  z-index: 100;
}

#prev { margin-right: -45px; }

#next { margin-left: -45px; }

4. Include the necessary jQuery library in the web page.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

5. Enable the slideshow with a little bit JavaScript.

$(document).ready(function(){
  //Set options
  var speed = 500;    //fade speed
  var autoswitch = true;  // auto slider option
  var autoswitch_speed = 4000  //auto slider speed

  // Add initial active class
  $(".slide").first().addClass("active");

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

  // Show first slide
  $(".active").show();

  // Next Handler
  $('#next').on('click', nextSlide);

  // Prev Handler
  $('#prev').on('click', prevSlide);

  // Auto Slider Handler
  if(autoswitch == true){
    setInterval(nextSlide,autoswitch_speed);
  }

  // Switch to next slide
  function nextSlide(){
    $('.active').removeClass('active').addClass('oldActive');
    if($('.oldActive').is(':last-child')){
      $('.slide').first().addClass('active');
    } else {
      $('.oldActive').next().addClass('active');
    }
    $('.oldActive').removeClass('oldActive');
    $('.slide').fadeOut(speed);
    $('.active').fadeIn(speed);
  }

  // Switch to prev slide
  function prevSlide(){
    $('.active').removeClass('active').addClass('oldActive');
    if($('.oldActive').is(':first-child')){
      $('.slide').last().addClass('active');
    } else {
      $('.oldActive').prev().addClass('active');
    }
    $('.oldActive').removeClass('oldActive');
    $('.slide').fadeOut(speed);
    $('.active').fadeIn(speed);
  }

});

---

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