Small Responsive Carousel Slider In Vanilla JavaScript

Preview:

Description:

A lightweight, easy, flexible, high-performance carousel slider for any content. Written in vanilla JavaScript. With no 3rd dependencies.

How to use it:

1. The required markup for the carousel slider. Each slide should be wrapped in a DIV container with the CSS class of ‘slide-item’.

<div class="slider">
  <div class="slider-container">
    <div class="slide-item">
      <h2>Slide 1</h2>
    </div>
    <div class="slide-item">
      <h2>Slide 2</h2>
    </div>
    <div class="slide-item">
      <h2>Slide 3</h2>
    </div>
    <div class="slide-item">
      <h2>Slide 4</h2>
    </div>
    <div class="slide-item">
      <h2>Slide 5</h2>
    </div>
  </div>
</div>

2. Download the package and insert the necessary JavaScript & CSS files into the HTML page.

<link rel="stylesheet" href="css/slider.css" />
<script src="js/slider.js"></script>

3. Initialize the slider on the top container. Done.

slider({
  selector: document.querySelector('.slider')
});

4. Determine whether to show the pagination dots. Default: true.

slider({
  selector: document.querySelector('.slider'),
  pagination: true
});

5. Determine whether to show the navigation arrows. Default: false.

slider({
  selector: document.querySelector('.slider'),
  arrows: true
});