Creating an image slider using HTML, CSS, and JavaScript can be a fun and rewarding project. In this tutorial, I will guide you through the process of building a simple image slider step by step. By the end of this tutorial, you will have a fully functional image slider that you can customize and use for your own projects.
Step 1: Setting up the HTML Structure
First, let’s create the basic HTML structure for our image slider. Open your text editor and create a new HTML file. Add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Slider</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="slider">
<div class="slide">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="slide">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="slide">
<img src="image3.jpg" alt="Image 3">
</div>
</div>
<button class="prev" onclick="prevSlide()">❮</button>
<button class="next" onclick="nextSlide()">❯</button>
<script src="script.js"></script>
</body>
</html>In this HTML structure, we have a container div with the class "slider" that will hold our image slides. Each image slide is wrapped in a div with the class "slide" and contains an image element with the source of the image and alt text. We also have two buttons with the classes "prev" and "next" that will allow the user to navigate through the images. The onclick event handlers are set to call the functions prevSlide() and nextSlide() defined in the JavaScript file.
Step 2: Styling the Image Slider
Next, let’s create a CSS file to style our image slider. Create a new file named "styles.css" and add the following CSS code:
body {
font-family: Arial, sans-serif;
}
.slider {
display: flex;
overflow: hidden;
}
.slide {
flex: 1;
}
img {
width: 100%;
height: auto;
}
button {
background-color: #f1f1f1;
border: none;
color: #333;
padding: 10px 20px;
cursor: pointer;
}
button:hover {
background-color: #ddd;
}In this CSS code, we style the body with a default font family. We set the display property of the slider container to flex to align the image slides horizontally. The images inside each slide are set to fill the container width, and the buttons are styled with padding and background colors.
Step 3: Implementing the JavaScript Functions
Lastly, let’s implement the JavaScript functions that will handle the navigation of the image slider. Create a new file named "script.js" and add the following JavaScript code:
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
function showSlide(index) {
if (index < 0) {
currentSlide = slides.length - 1;
} else if (index >= slides.length) {
currentSlide = 0;
} else {
currentSlide = index;
}
slides.forEach((slide, index) => {
slide.style.display = index === currentSlide ? 'block' : 'none';
});
}
function prevSlide() {
showSlide(currentSlide - 1);
}
function nextSlide() {
showSlide(currentSlide + 1);
}
showSlide(currentSlide);In this JavaScript code, we declare a variable currentSlide to keep track of the currently displayed slide index. We select all slide elements using querySelectorAll and store them in the slides array. The showSlide function takes an index parameter and displays the corresponding slide while hiding the rest. The prevSlide and nextSlide functions decrement and increment the currentSlide index to navigate to the previous and next slides, respectively.
Step 4: Testing the Image Slider
Save all the files and open the HTML file in a web browser. You should now see your image slider with the first image displayed. Click the previous and next buttons to navigate through the images.
Congratulations! You have successfully created a simple image slider using HTML, CSS, and JavaScript. Feel free to customize the styles and add more images to your slider. You can also explore additional features like autoplay, slide transitions, and pagination for a more dynamic user experience. Enjoy coding!
perfection 🤝
whats the size of the picture youve used?
can do same
by touching image
and move scrole multi image
and click image
to zoom and and and
why does it not show on the browser
Абалденно! Очень красиво!! Вы большой молодец!! Подписка + like
How do I make it responsive?
And my pictures one of it is still sticking at the left side and I follow everything you did, I even went through your code here but still the same
Amazing tutorial thx so much I made it 🙂
My js isn't reacting , what am I to do ?
Buen dia me gusto te sigo en YT
pases buen dia
For those who had their arrows not working:
instead of <script src="app.js"></script>
try this <script defer src="app.js"></script>
how can i make it work on mobile… the nav bars are not setting up well with small screen's
if you add top menu and responsive menu it will be more helpfull for everyone and great job
It is not working
arrows not working even when i downloaded source code
how do i fix
Image link
Kudus 👉 ur video was super helpful
Thanks alot
where did you get the images?
amazing work thank you
Does anybody can help how to make this in react js ???
Great video…❤