This tutorial is going to cover how to create an automatic image slider in HTML CSS, so you can spend more time focusing on the content!
There are many theories about how much attention spans have gotten shorter in the digital age, but there’s no denying that images are an important part of any website.
Lucky for you, there are lots of ways to have a slideshow on your homepage.
If you’re looking to add an automatic image slider to your website, HTML and CSS can help you get the job done. In this blog post, we’ll show you how to create an image slider using both HTML and CSS.
We’ll also provide some tips on how to make your slider look its best. So let’s get started!
Automatic Image Slider in HTML CSS
An image slider is basically an image gallery that is used to display multiple images in a slideshow format. Sliders are a very popular way to showcase content on websites and are usually used to highlight new products, services, or features.
Image sliders are created using a combination of HTML, CSS, and JavaScript. In this tutorial, we will be creating a simple image slider using HTML, CSS, and JavaScript.
I’ve shared the video tutorial, inside the tutorial, you will learn step by step How to create an Automatic Image Slider in HTML CSS and Also a little bit of JavaScript. I also mentioned each code below you can check it now.
<!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">
<link rel="stylesheet" href="css/style.css">
<title>Image Slider in HTML/CSS</title>
</head>
<body>
<!-- Image Slider Start -->
<div class="slider">
<div class="slides">
<!-- Radio Button Start -->
<input type="radio" name="radio-btn" id="radio1">
<input type="radio" name="radio-btn" id="radio2">
<input type="radio" name="radio-btn" id="radio3">
<input type="radio" name="radio-btn" id="radio4">
<!-- Radio Button Close -->
<!-- Slide Image Start -->
<div class="slide first">
<img src="img/img-1.jpg" alt="">
</div>
<div class="slide">
<img src="img/img-2.jpg" alt="">
</div>
<div class="slide">
<img src="img/img-3.jpg" alt="">
</div>
<div class="slide">
<img src="img/img-4.jpg" alt="">
</div>
<!-- Slide Image Close -->Once you used the above-mentioned code, then, you will be able to see the images and also radio buttons. Then the next thing you need to add to it automatic buttons.
<!-- Automatic Navigation Start -->
<div class="navigation-auto">
<div class="auto-btn-1"></div>
<div class="auto-btn-2"></div>
<div class="auto-btn-3"></div>
<div class="auto-btn-4"></div>
</div>
<!-- Automatic Navigation Close -->
</div>
<!-- Slides Close -->Then the next thing you need to add is manual navigation, which means you will use radio buttons to change the slides. I’ve mentioned the code below you can check it.
<!-- Mannual Navigation Start -->
<div class="navigation-mannual">
<label for="radio1" class="mannual-btn"></label>
<label for="radio2" class="mannual-btn"></label>
<label for="radio3" class="mannual-btn"></label>
<label for="radio4" class="mannual-btn"></label>
</div>
<!-- Mannual Navigation Close -->
</div>
<!-- Image Slider Close -->Once you do that, then you will be able to see a slider will appear on your web page. But the second last thing you need to add to it So, You need to add a style sheet to the design and display the image as a slider.
body{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #ccc;
}
.slider{
width: 800px;
height: 500px;
border-radius: 10px;
overflow: hidden;
}
.slides{
width: 500%;
height: 500px;
display: flex;
}
.slides input{
display: none;
}
.slide{
width: 20%;
transition: 2s;
}
.slide img{
width: 800px;
height: 500px;
}
.navigation-mannual{
position: absolute;
width: 800px;
margin-top: -40px;
display: flex;
justify-content: center;
}
.mannual-btn{
border: 2px solid #ccc;
padding: 5px;
border-radius: 10px;
cursor: pointer;
transition: 1s;
}
.mannual-btn:not(:last-child){
margin-right: 40px;
}
.mannual-btn:hover{
background-color: #ccc;
}
#radio1:checked ~ .first{
margin-left: 0;
}
#radio2:checked ~ .first{
margin-left: -20%;
}
#radio3:checked ~ .first{
margin-left: -40%;
}
#radio4:checked ~ .first{
margin-left: -60%;
}
/* Automatic Navigation */
.navigation-auto{
position: absolute;
display: flex;
width: 800px;
justify-content: center;
margin-top: 460px;
}
.navigation-auto div{
border: 2px solid #333;
padding: 5px;
border-radius: 10px;
transition: 1s;
}
.navigation-auto div:not(:last-child){
margin-right: 40px;
}
#radio1:checked ~.navigation-auto .auto-btn-1{
background: #ccc;
}
#radio2:checked ~.navigation-auto .auto-btn-2{
background: #ccc;
}
#radio3:checked ~.navigation-auto .auto-btn-3{
background: #ccc;
}
#radio4:checked ~.navigation-auto .auto-btn-4{
background: #ccc;
}
Once you do that, your slider works very well, but the last thing you need to add it as a timer. Basically, in JavaScript we need to add a timer to change the images automatically, So we need on a little bit of JavaScript.
var counter = 1;
setInterval(function() {
document.getElementById('radio'+ counter).checked = true;
counter++;
if(counter>4){
counter=1
}
}, 5000);That’s it for creating an Automatic image slider in HTML CSS JavaScript. I hope you understood as well, If you face any problems please watch the complete tutorial.
Automatic image slider in HTML CSS JavaScript
I’ve mentioned the code step by step above, you can check it complete source code of Automatic Image Slider in HTML CSS JavaScript below. Also, I’ve shared the source code of the project.
<!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">
<link rel="stylesheet" href="css/style.css">
<title>Image Slider in HTML/CSS</title>
</head>
<body>
<!-- Image Slider Start -->
<div class="slider">
<div class="slides">
<!-- Radio Button Start -->
<input type="radio" name="radio-btn" id="radio1">
<input type="radio" name="radio-btn" id="radio2">
<input type="radio" name="radio-btn" id="radio3">
<input type="radio" name="radio-btn" id="radio4">
<!-- Radio Button Close -->
<!-- Slide Image Start -->
<div class="slide first">
<img src="img/img-1.jpg" alt="">
</div>
<div class="slide">
<img src="img/img-2.jpg" alt="">
</div>
<div class="slide">
<img src="img/img-3.jpg" alt="">
</div>
<div class="slide">
<img src="img/img-4.jpg" alt="">
</div>
<!-- Slide Image Close -->
<!-- Automatic Navigation Start -->
<div class="navigation-auto">
<div class="auto-btn-1"></div>
<div class="auto-btn-2"></div>
<div class="auto-btn-3"></div>
<div class="auto-btn-4"></div>
</div>
<!-- Automatic Navigation Close -->
</div>
<!-- Mannual Navigation Start -->
<div class="navigation-mannual">
<label for="radio1" class="mannual-btn"></label>
<label for="radio2" class="mannual-btn"></label>
<label for="radio3" class="mannual-btn"></label>
<label for="radio4" class="mannual-btn"></label>
</div>
<!-- Mannual Navigation Close -->
</div>
<!-- Image Slider Close -->
<script>
var counter = 1;
setInterval(function() {
document.getElementById('radio'+ counter).checked = true;
counter++;
if(counter>4){
counter=1
}
}, 5000);
</script>
</body>
</html>Automatic Multiple Image Slider in HTML CSS
However, recently, I made another tutorial related to image sliders, you can learn it from scratch with the help of a video tutorial. Also you can get the ideas from it, how you can create it?
Conclusion
Congratulations on creating your very own Automatic image slider in HTML CSS JavaScript! This is a great accomplishment that not many people can say they’ve done. Your slider will be the envy of all your friends and family.
You May Also Like:
- Best VS Code Extension for HTML and CSS
- Best IDE for HTML CSS JavaScript
- How to create a Registration Form in HTML
- Best HTML CSS Project For Beginners
Now that you know how to create an automatic image slider in HTML CSS, there’s no limit to what you can do. With a little bit of creativity, you can create some truly amazing things. Thanks for reading and happy coding!
