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 –
Screenshot-2021-05-28-at-7-49-39-PM

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 = [
    "contBcg-0",
    "contBcg-1",
    "contBcg-2",
    "contBcg-3",
    "contBcg-4"
  ];

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

  buttons.forEach(function(button){
    button.addEventListener('click', function(e){
      if (button.classList.contains('btn-left')){
        counter--
        if(counter < 0){ counter = pictures.length -1 } imageDIV.style.backgroundImage = `url('./img/${pictures[counter]}.jpeg')` } if (button.classList.contains('btn-right')){ counter++ if(counter > pictures.length -1){
          counter = 0
        }
        imageDIV.style.backgroundImage = `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">

<head>
 <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="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">

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

<body>


 <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>
   </div>
  </div>
 </div>





 <!-- 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>
</body>

</html>

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




Our Best Partners: crazy time histori how to crack lucky jet new mga casinos pelikielto kaikille kasinoille ムーンプリンセス the big catch demo nyt casino crazy time statics dragon hatch demo grátis kasinolla

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