Minimal Background Slider In Vanilla JavaScript

Preview:

Description:

A minimal, responsive background slider/slideshow written in vanilla JavaScript.

How to use it:

1. Load the core stylesheet and font awesome iconic font in the document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css" />

2. Add background images to the slides and then wrap them together with the controls to the slider container.

<div class="slider-container">
  <div class="slide active" style="background-image: url('https://images.unsplash.com/photo-1613109526778-27605f1f27d2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80');">
  </div>
  <div class="slide" style="background-image: url('https://images.unsplash.com/photo-1588392382834-a891154bca4d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80');">
  </div>
  <div class="slide" style="background-image: url('https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80');">
  </div>
  <div class="slide" style="background-image: url('https://images.unsplash.com/photo-1431794062232-2a99a5431c6c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80');">
  </div>
  <div class="slide" style="background-image: url('https://images.unsplash.com/photo-1470770903676-69b98201ea1c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80');">
  </div>
  <button class="arrow left-arrow" id="left">
    <i class="fas fa-arrow-left"></i>
  </button>
  <button class="arrow right-arrow" id="right">
    <i class="fas fa-arrow-right"></i>
  </button>
</div>

3. Load the main script script.js at the end of the document. That’s it.

<script src="script.js"></script>