Simple Lightweight Content Slider Plugin with jQuery - slider.js

Yet another lightweight jQuery content slider plugin that converts a list of any html content into an automatic slider.

Features:

• Supports both images and html elements.
• Left / right arrow indicators.
• Autoplay and pause on hover.
• Custom sliding speed, transition delay and initial slide.

How to use it:

1. Add a list of images with description boxes into the slider.

<div id="slider">
  <div class="indicator">
    <div class="previous"></div>
    <div class="next"></div>
  </div>
  <ul class="slides">
    <li class="slide">
      <img src="1.jpeg" alt="">
      <div class="info">
      <a href=""><h3>Image 1</h3></a>
      <p>Descript 1</p>
      </div>
    </li>
    <li class="slide">
        <img src="2.jpeg" alt="">
      <div class="info">
      <a href=""><h3>Image 2</h3></a>
      <p>Descript 2</p>
      </div>              
    </li>
    <li class="slide">
        <img src="3.jpg" alt="">
      <div class="info">
      <a href=""><h3>Image 3</h3></a>
      <p>Descript 3</p>
      </div>              
    </li>
  </ul>
</div>

2. The required CSS styles for the content slider.

#slider {
  width: 800px;
  height: 400px;
  overflow: hidden;
  margin: 50px auto;
  border-radius: 20px;
}

#slider .slides {
  display: block;
  margin: 0;
  padding: 0;
  width: 20000px;
  height: 100%;
}

#slider .slide {
  float: left;
  width: 800px;
  height: 400px;
  list-style: none;
}

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

#slider .slide .info {
  width: 100%;
  height: 80px;
  position: relative;
  bottom: 90px;
  margin: 0;
  padding: 8px 0;
  background: #eee;
  opacity: 0.6;
  text-align: center;
}

#slider .slide .info a { }

#slider .slide .info a:hover { text-decoration: none; }

#slider .slide .info h3 {
  font-size: 18px;
  line-height: 20px;
  margin: 0;
  padding: 0;
  color: #000;
}

#slider .slide .info p {
  text-align: left;
  padding: 5px 15px;
}

#slider .slide .info .read_more {
  font-size: 16px;
  color: #cd0000;
}

#slider .indicator .previous {
  width: 30px;
  height: 30px;
  background: url("img/direction_nav.png") no-repeat scroll 0px 0px;
  opacity: 1;
  cursor: pointer;
}

#slider .indicator .next {
  width: 30px;
  height: 30px;
  background: url("img/direction_nav.png") no-repeat scroll -26px 0px;
  opacity: 1;
  cursor: pointer;
}

#slider .indicator {
  margin: -20px 10px 0px;
  height: 30px;
  width: 97%;
  top: 50%;
  position: relative;
}

.indicator .previous {
  left: 0px;
  float: left;
  display: block;
}

.indicator .next {
  right: 0px;
  float: right;
  display: block;
}

3. Add jQuery library and the jQuery slider.js script to your html page.

<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script src="js/slider.js"></script>

4. That's it. You can config the content slider by editing the slider.js in your text editor.

var pause =3000;
var speed=1000;
var width=800;
var current=1;

---

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