Simple Click-through Content Slider with jQuery and CSS3

A simple yet multi-purpose jQuery content slider which allows you to cycle through a set of DIV elements with smooth CSS3 fade transitions.

How to use it:

1. Insert a set of content slides into the slider.

<div class="slider">
  <div class="slide active">
    <h2>Slide One</h2>
    <p>Content One</p>
  </div>
  <div class="slide">
    <h2>Slide Two</h2>
    <p>Content Two</p>
  </div>
  <div class="slide">
    <h2>Slide Three</h2>
    <p>Content Three</p>
  </div>
</div>

2. The primary CSS styles.

.slider {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 700px;
  height: 300px;
  margin-left: -350px;
  margin-top: -150px;
  overflow: hidden;
  border-radius: 7px;
  background-color: black;
}

.slider .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: white;
  padding: 40px;
  text-align: center;
  font-size: 20px;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  opacity: 0;
  cursor: pointer;
}

.slider .slide.active { opacity: 1; }

3. Load the needed jQuery JavaScript library in the document.

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

4. The JavaScript to enable the content slider.

$(document).ready(function () {
  $('.slider').on('click', function () {
    if ($('.active').next('.slide').length) {
      $('.active').removeClass('active').next('.slide').addClass('active');
    } else {
      $('.active').removeClass('active');
      $('.slide').first().addClass('active');
    }
  });
});

---

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