Creating a slider page on a website can be a great way to showcase multiple images or content in a visually appealing way. In this tutorial, we will walk you through the process of creating a basic slider page using HTML, CSS, and JavaScript.
Step 1: Create a new HTML file
Start by creating a new HTML file in your text editor. You can name this file index.html or slider.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Slider</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Slider container -->
<div id="slider">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
<script src="script.js"></script>
</body>
</html>Step 2: Create a CSS file
Next, create a new CSS file in the same folder as your HTML file. You can name this file styles.css.
#slider {
width: 100%;
max-width: 700px;
height: 400px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#slider img {
width: 100%;
height: 100%;
object-fit: cover;
display: none;
position: absolute;
}
.active {
display: block;
}Step 3: Create a JavaScript file
Lastly, create a new JavaScript file in the same folder as your HTML file. You can name this file script.js.
let currentIndex = 0;
const images = document.querySelectorAll('#slider img');
function nextImage() {
images[currentIndex].classList.remove('active');
currentIndex = (currentIndex + 1) % images.length;
images[currentIndex].classList.add('active');
}
setInterval(nextImage, 5000);Step 4: Add images to the slider
Make sure to add the images you want to display in the slider to the same folder as your HTML file. You can use any image you like and name them image1.jpg, image2.jpg, image3.jpg, etc.
Step 5: Test your slider page
Open your HTML file in a web browser to see your image slider in action. The images should now slide automatically every 5 seconds.
That’s it! You have successfully created a basic slider page using HTML, CSS, and JavaScript. Feel free to customize the styles and functionality of the slider to fit your specific needs.
