Cross-slide Background Carousel In Vanilla JavaScript

Category: Javascript , Slider | August 9, 2019
Views Total:792 views
Official Page:Go to website
Last Update:August 9, 2019


Cross-slide Background Carousel In Vanilla JavaScript


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>
<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>
<button class="arrow-button-right">
  <img src="vanillaslider/arrow-right.svg" alt="next">
<button class="arrow-button-left">
  <img src="vanillaslider/arrow-left.svg" alt="previous">

Add background images to the slides.

  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;

You Might Be Interested In:

Leave a Reply