Cross-slide Background Carousel In Vanilla JavaScript

Preview:

Description:

A tiny, responsive carousel slider that cross-slides between various background images using plain JavaScript and CSS.

How to use it:

Load the core stylesheet slider.css and JavaScript slider.js in the document.

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

Add slides together with navigation arrows and pagination bullets to the carousel.

<div class="slides">
  <div id="slide-1" class="active"></div>
  <div id="slide-2"></div>
  <div id="slide-3"></div>
  <div id="slide-4"></div>
</div>
<ul class="slide-controller">
  <li data-link="slide-1" class="active"></li>
  <li data-link="slide-2"></li>
  <li data-link="slide-3"></li>
  <li data-link="slide-4"></li>
</ul>
<button class="arrow-button-right">
  <img src="vanillaslider/arrow-right.svg" alt="next">
</button>
<button class="arrow-button-left">
  <img src="vanillaslider/arrow-left.svg" alt="previous">
</button>

Add background images to the slides.

#slide-1,#slide-2,#slide-3,#slide-4{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
#slide-1 {
  background-image: url(1.jpg);
}
#slide-2 {
  background-image: url(2.jpg);
}
#slide-3 {
  background-image: url(3.jpg);
}
#slide-4 {
  background-image: url(4.jpg);
}

Enable the autoplay feature and set the interval in milliseconds.

var autoplay = true, slidetime = 5000;