Hey guys in this post, we will create a simple javascript background image slider application. The project is live on the web.
Table of Contents
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 = [
"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
