Simple Click-through Content Slider with jQuery

Simple click-through slider is a multipurpose jQuery content slider that allows you to cycle through a set of DIV elements with smooth CSS3 fade transitions.

content slider codepen, content slider jquery, content slider html css

How to make use of it:

1. Insert a set of slides of content in 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. Basic 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 required jQuery JavaScript library into the document.

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

4. 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');
    }
  });
});

simple click-through content slider Plugin/Github