Simple Pure JavaScript Content Slider – Vanilla Slider

Preview:

Description:

Helps you create vertical or horizontal content carousels/sliders with the help of pure JavaScript and CSS/CSS3.

Basic usage:

Create a list of Html content for the slider.

<div class="slider-demo">
  <ul>
    <li>
      <div class="slide">Slide 1</div>
    </li>
    <li>
      <div class="slide">Slide 2</div>
    </li>
    <li>
      <div class="slide">Slide 3</div>
    </li>
    <li>
      <div class="slide">Slide 4</div>
    </li>
    <li>
      <div class="slide">Slide 5</div>
    </li>
  </ul>
</div>

The sample CSS to style the content slider.

.slider-demo {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  margin-bottom: 100px;
}
.slider-demo ul {
  list-style: outside none;
  width: 10000%;
  position: relative;
  top: 0;
  right: 0;
  transition: all 0.6s ease;
  padding: 0;
  margin: 0;
}
.slider-demo li { float: left; }
.slider-demo {
  background-color: #22c3bc;
  width: 500px;
  height: 300px;
  text-align: center;
  line-height: 300px;
  font-size: 50px;
  color: #fff;
}

Include the necessary vanilla-slider.js at the end of the document.

<script src="vanilla-slider.js"></script>

Create next/preve buttons to control the slider manually.

<a href="#" class="s-prev">Prev</a> 
<a href="#" class="s-next">Next</a>

Initialize the content slider.

var single = new Slider('.slider-demo', {
    controlNext: '.s-next',
    controlPrev: '.s-prev',
    // more options here
);

Full options.

visibles: 1,
direction: 'horizontal',
controlPrev: '',
controlNext: '',
justify: true,
steps: 1,
// TO IMPLEMENT:
dots: '',
touch: true,
animation: 'slide',
autoPlay: 1000,
infinite: true