Basic HTML List Based Content Slider Plugin - Linear Slider

Linear Slider is a really simple jQuery plugin that turns a list of web content into a horizontal slider/carousel with support for auto play. When the auto play mode is turned on, the slider will slide back to the first slide when you reach the last one.

How to use it:

1. Create an unordered list of html content for the slider.

<div id="slide-content">
  <ul>
    <li>Slide #1</li>
    <li>Slide #2</li>
    <li>Slide #3</li>
    <li>Slide #4</li>
    <li>Slide #5</li>
  </ul>
</div>

2. Create an empty ordered list for the pagination control.

<div id="slide-nav">
  <ol></ol>
</div>

3. Insert them into a DIV container with an unique ID. The full html markup should be like this:

<div id="slide">
  <div id="slide-content">
    <ul>
      <li>Slide #1</li>
      <li>Slide #2</li>
      <li>Slide #3</li>
      <li>Slide #4</li>
      <li>Slide #5</li>
    </ul>
  </div>
  <div id="slide-nav">
    <ol></ol>
  </div>        
</div>

4. Style the slider in the CSS as shown below:

#slide {
  width: 670px;
  height: 150px;
}

#slide-content {
  width: 670px;
  height: 100px;
  overflow: hidden;
  background-color: #538cc6;
  border-radius: 5px;
  -moz-box-shadow: 0 0 5px #888;
  -webkit-box-shadow: 0 0 5px #888;
  box-shadow: 0 0 5px #888;
}

#slide-content ul {
  margin: 0;
  padding: 0;
  width: 6000px;
  height: 100px;
  list-style: none;
}

#slide-content ul li {
  color: #f5f5f5;
  width: 670px;
  height: 100px;
  line-height: 100px;
  display: block;
  text-align: center;
  float: left;
}

5. Apply your own CSS styles to the pagination control.

#slide-nav { text-align: center; }

#slide-nav {
  margin: 10px 0 0 0;
  padding: 0;
}

#slide-nav ol { padding-left: 0; }

#slide-nav ol li {
  display: inline-block;
  float: none;
  margin: 0 8px;
  padding: 4px;
  background: transparent;
  border-radius: 15px;
  overflow: hidden;
  border: 2px solid #bfbfbf;
  cursor: pointer;
}

#slide-nav .active {
  background: #bfbfbf;
  cursor: default;
}

6. Invoke the plugin with default options.

$('#slide').linearSlider();

7. Enable the autoplay mode and adjust the delay between slides change.

$('#slide').linearSlider({
  pause: 3000,
  autoplay: true
});

8. Change the default animation speed in milliseconds.

$('#slide').linearSlider({
  speed: 1000
});

Change log:

2016-12-04

• used ES6 variables

---

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