Basic Responsive Fading Content Slider With jQuery - SimpleSlider

An ultra-light jQuery plugin provides a simple way to create a fully responsive content slider with background images. The height and width of the content slider will be dynamically resized based on the screen size.

How to use it:

1. Include the Font Awesome 4 in the head section for slider controls.

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

2. Create a container slider following the Html structure like this. Use data-set to specify a set of background images for the content slider.

<div id="banner" data-set="images/slide1.jpg, images/slide2.jpg, images/slide3.jpg, images/slide4.jpg, images/slide5.jpg">
  <div class="slide" data-slide="1">
    <div class="featured-block center">
      <h1> Title 1 </h1>
      <p> Description 1 </p>
    </div>
  </div>
  <div class="slide" data-slide="2">
    <div class="featured-block center">
      <h1> Title 2 </h1>
      <p> Description 2 </p>
    </div>
  </div>
  <div class="slide" data-slide="3">
    <div class="featured-block center">
      <h1> Title 3 </h1>
      <p> Description 3 </p>
    </div>
  </div>
  <div class="slide" data-slide="4">
    <div class="featured-block center">
      <h1> Title 4 </h1>
      <p> Description 4 </p>
    </div>
  </div>
  <div class="slide" data-slide="5">
    <div class="featured-block center">
      <h1> Title 5 </h1>
      <p> Description 5 </p>
    </div>
  </div>
  <a class="next"><i class="fa fa-arrow-right"></i></a> 
  <a class="back"><i class="fa fa-arrow-left"></i></a> 
</div>

3. The sample CSS to style the slider. Add the following CSS snippets into your existing CSS file or include the style.css directly into your document.

.simple-slider {
  min-height: 350px;
  max-height: 500px;
  margin-top: 50px;
  border: 10px solid #333;
  position: relative;
  background-size: cover;
}

.simple-slider .slide { padding: 10px; }

.simple-slider [data-slide] { display: none; }

.simple-slider [data-slide='1'] { display: block; }

.simple-slider .back,
.simple-slider .next {
  position: absolute;
  bottom: 10px;
  background-color: #fff;
  padding: 10px 15px;
  cursor: pointer;
  color: #333;
  border-radius: 0px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}

.simple-slider .back:hover,
.simple-slider .next:hover {
  text-decoration: none;
  color: #fff;
  background-color: #333;
  cursor: pointer;
}

.simple-slider .next { right: 10px; }

.simple-slider .back { right: 60px; }

.featured-block {
  color: #fff;
  text-shadow: 0px 1px 1px #333;
}

.center { text-align: center; }

4. Include the jQuery library and jQuery SimpleSlider plugin at the end of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="dist/jquery.simpleslider.js"></script> 

5. Initialize the content slider with one JS call.

$(document).ready(function(){
$('#banner').SimpleSlider();
});

---

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