Introduction: Image Slides in HTML & CSS using JavaScript
Here We are creating the responsive Image Slider by using HTML,CSS and Javascript.This is very simple and interesting project for your website or practice if you are a beginnner.This Image Slider will explain the depth concept and so many functionalities of javascript and will give the better interface to the user. In this project, there will be images in the gallery and a button to slide the images to the next image. When we click on the image, that image will be shown in full screen. There will be two buttons, one for the right slide and another for the left slide.
So let’s start making Responsive Image Slider by doing simple coding not very complicated that can be understood by every developer.So come on see & analyse our code and try to make it according to you. We have covered the basic concepts of HTML, CSS, and JavaScript, from which you will learn a lot of information about web development through this project. I hope this project will be beneficial for you all, and if you have any doubts, feel free to contact us through the contact details given in the footer of the page.
Set Up the HTML Structure:
Firstly, We have to make the structure of image slider by using HTML. There will be contain Images in the div in horizontal way. Two buttons one on the left slide to slide the image left and another on the right to slide
the image to the right. We will insert the image in the img tag (which is used to insert the image). Two buttons in the button tag (which is used to make a button for any action). We have made a parent that contains all the content of the project, and in this div there will be separated divs for the images and also a div for the buttons used in it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <title>Image Slider</title>
</head>
<body>
<div class="slider-frame">
<div class="slider-item active" style="
background-image: url('https://images.unsplash.com/photo-1702208338334-c1f15ea7f57c?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
"></div>
<div class="slider-item" style="
background-image: url('https://images.unsplash.com/photo-1523673671576-35ff54e94bae?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
"></div>
<div class="slider-item" style="
background-image: url('https://images.unsplash.com/photo-1544441543-513a50c268f1?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
"></div>
<div class="slider-item" style="
background-image: url('https://images.unsplash.com/photo-1525337132786-5828a43893af?q=80&w=1476&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
"></div>
<div class="slider-item" style="
background-image: url('https://images.unsplash.com/photo-1473700216830-7e08d47f858e?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
"></div>
<button class="nav-button left-nav" id="left">
<i class="fas fa-arrow-left"></i>
</button>
<button class="nav-button right-nav" id="right">
<i class="fas fa-arrow-right"></i>
</button>
</div>
</body>
</html>CSS : Style Your Image Slider
Now,after creating the structure of image slider. Its time to make the slider page resposive and perfect by using CSS. It is an external stylesheet attached to the HTML page. In it we will adjust the size of images to keep all images of same size. Also give the height and width to the parent div in which all the images contianed. Navigation button will look better after giving styling to it like customize the apearance of button.
/* Importing Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
background-position: center center;
background-size: cover;
transition: 0.4s ease;
}
body::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.7);
z-index: -1;
}
.slider-frame {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
height: 70vh;
width: 70vw;
position: relative;
overflow: hidden;
}
.slider-item {
opacity: 0;
height: 100vh;
width: 100vw;
background-position: center center;
background-size: cover;
position: absolute;
top: -15vh;
left: -15vw;
transition: 0.4s ease;
z-index: 1;
}
.slider-item.active {
opacity: 1;
}
.nav-button {
position: fixed;
background-color: transparent;
padding: 20px;
font-size: 30px;
color: #fff;
border: 2px solid orange;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.nav-button:focus {
outline: 0;
}
.left-nav {
left: calc(15vw - 65px);
}
.right-nav {
right: calc(15vw - 65px);
}JavaScript Functionality
Now, after making the slider images. Its time to make it workable by giving the logic to the buttons given in slider page. In javaccript first we have to target the scroll bar and make it smooth while scrolling. Then have to target the buttons to make it sliding the images by clicking with the use of functionalities in js.
<script>
const body = document.body;
const slides = document.querySelectorAll(".slider-item");
const leftButton = document.getElementById("left");
const rightButton = document.getElementById("right");
let activeSlide = 0;
const setBackground = () => {
body.style.backgroundImage = slides[activeSlide].style.backgroundImage;
};
const setActiveSlide = () => {
slides.forEach((slide) => slide.classList.remove("active"));
slides[activeSlide].classList.add("active");
};
rightButton.addEventListener("click", () => {
activeSlide++;
if (activeSlide > slides.length - 1) activeSlide = 0;
setBackground();
setActiveSlide();
});
leftButton.addEventListener("click", () => {
activeSlide--;
if (activeSlide < 0) activeSlide = slides.length - 1;
setBackground();
setActiveSlide();
});
setBackground();
</script>Output of Responsive Image Slider
Now it’s your turn to make it yourself by taking ideas from this tutorial. If you want the source code of thisresponsive Image Slider , Then click link
You can also check:
10 Responses
If some one wants expert view regarding blogging then i advise him/her to
pay a quick visit this webpage, Keep up the fastidious work.
Very nice post. I definitely love this site.
Keep it up!
Great tutorial! The image slider works perfectly on my site, and it looks great on all devices. The instructions were clear and easy to follow. Can’t wait to see what other projects you share next!
The image slider tutorial was fantastic! I enjoyed the way you covered the basics and provided a functional and stylish final product. It’s great for both beginners and experienced developers looking to refine their skills.
Appreciate this post. Let me try it out.
This was exactly what I needed to enhance my website. The project was simple yet effective, and I learned a lot about making responsive designs. Keep these tutorials coming!
Wow! After all I got a web site from where I be capable of actually
obtain helpful information regarding my study and knowledge.
Hey You image slider is too good keep it up bro
I had some doubts while implementing the image slider, but your contact details in the footer were a lifesaver. Thanks for the prompt response and for helping me out. The slider looks awesome now!
This image slider tutorial was incredibly helpful! The step-by-step instructions made it easy to follow along, even for a beginner like me. The final product looks fantastic on my website. Thanks for sharing!