Press "Enter" to skip to content

A Simple & Responsive Background Slider Plugin in Vanilla JavaScript

Background slider or slideshow plugin is a simple and responsive background slider/slide show written in vanilla javascript.

background image slider in javascript, automatic background image slider in html css, pure javascript slider, background carousel slider, fullscreen background image slideshow css

How to make use of it:

1. Load the core stylesheet and font superior iconic font within the doc.

<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 pictures to the slides after which wrap them along 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');">
  </div>
  <div class="slide" style="background-image: url('https://images.unsplash.com/photo-1588392382834');">
  </div>
  <div class="slide" style="background-image: url('https://images.unsplash.com/photo-1426604966848');">
  </div>
  <div class="slide" style="background-image: url('https://images.unsplash.com/photo-1431794062232');">
  </div>
  <div class="slide" style="background-image: url('https://images.unsplash.com/photo-1470770903676');">
  </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 principle script script.js on the finish of the doc.

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

Minimal Background Slider Plugin/Github, vanilla js slider, pure javascript carousel, background image slider


See Demo And Download

Official Website(Bryanauta): Click Here

This superior jQuery/javascript plugin is developed by Bryanauta. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.