Javascript Background Image Slider Project for Beginners

Hey guys in this post, we will create a simple javascript background image slider application. The project is live on the web.

Topics covered

This application involves the following topics –

  • DOM Manipulation
  • Control Structures
  • Array.forEach()
  • Javascript CSS Manipulation
  • eventListeners

Complete source code

The below image shows you the project structure –

Add styles to the application

Create a main.css file and add the following content

:root {
  --mainWhite: #f2fdff;
  --mainBlue: #3e92cc;
.max-height {
  min-height: 100vh;
body {
  background: var(--mainWhite);
.img-container {
  min-height: 60vh;
  background: url("../img/contBcg-0.jpeg") center/cover fixed no-repeat;
  border: 0.5rem solid var(--mainBlue);
  border-radius: 0.5rem;
  position: relative;
@media screen and (min-width: 768px) {
  .img-container {
    min-height: 80vh;

.btn-left {
  position: absolute;
  top: 50%;
  left: 0;
  background: var(--mainBlue);
  color: var(--mainWhite) !important;
  transform: translate(-50%, -50%);
  border: 0.2rem solid var(--mainBlue);
  font-size: 1.2rem;
.btn-left:hover {
  border-color: var(--mainBlue);
  background: var(--mainWhite);
  color: var(--mainBlue) !important;
.btn-right {
  position: absolute;
  top: 50%;
  right: 0;
  background: var(--mainBlue);
  color: var(--mainWhite) !important;
  font-size: 1.2rem;
  transform: translate(50%, -50%);
  border: 0.2rem solid var(--mainBlue);
.btn-right:hover {
  border-color: var(--mainBlue);
  background: var(--mainWhite);
  color: var(--mainBlue) !important;

Add scripts to the application

Create an app.js file and add the following content

// immediate invoked function expression

(function() {
  const pictures = [

  //select both left and right button. Add event listeners
  const buttons = document.querySelectorAll('.btn')
  const imageDIV = document.querySelector('.img-container')
  let counter = 0

    button.addEventListener('click', function(e){
      if (button.classList.contains('btn-left')){
        if(counter < 0){ counter = pictures.length -1 } = `url('./img/${pictures[counter]}.jpeg')` } if (button.classList.contains('btn-right')){ counter++ if(counter > pictures.length -1){
          counter = 0
        } = `url('./img/${pictures[counter]}.jpeg')`

Add HTML to the application

Create an index.html file and add the following content

<!DOCTYPE html>
<html lang="en">

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <!-- bootstrap css -->
 <link rel="stylesheet" href="css/bootstrap.min.css">
 <!-- main css -->
 <link rel="stylesheet" href="css/main.css">
 <!-- google fonts -->
 <link href="" rel="stylesheet">

 <!-- font awesome -->
 <link rel="stylesheet" href="css/all.css">
 <title>Background Image Project</title>


 <div class="container">
  <div class="row max-height align-items-center">
   <div class="col-9 col-md-10 mx-auto img-container">
    <a class="btn btn-left"><i class="fas fa-caret-left"></i></a>
    <a class="btn btn-right"><i class="fas fa-caret-right"></i></a>

 <!-- jquery -->
 <script src="js/jquery-3.3.1.min.js"></script>
 <!-- bootstrap js -->
 <script src="js/bootstrap.bundle.min.js"></script>
 <!-- script js -->
 <script src="js/app.js"></script>


Note: Make sure to download the bootstrap.css, bootstrap.js, and jquery.js library from the internet add them to the respective folders. You can download the images from the Github repository.

Download the complete source code from github repository

Bushan Sirgur

Hey guys, I am Bushan Sirgur from Banglore, India. Currently, I am working as an Associate project in an IT company.

Leave a Reply