How to create automatic Image Slideshow in HTML

What is a Image slider?

Image slider is made with HTML and CSS and it creates a nice slideshow effect for you


How can you use Image slider?

We have made the code for you, you just have to copy the code from below and paste it where ever you want your Image Slider to be



Is it safe to use Image Slider?

It is completely safe to use Image slider as it is just a HTML and CSS code that does not collect any kind of information



What are the advantages of Image slider?

It has many advantages e.g. you can make portfolio with this, you can make automatic carousel with it, you can make testimonial slider


A quick overview of our Blog (Image slider)

In this example you can learn, how to make Image slider using HTML and CSS By Code With Bishal . Just Copy The Code From Here And Paste It Into Your Website. To Preview scroll the page to the top. If you are having any problem viewing the code contact us Image slider is a lightweight and easy-to-use CSS code that creates a Image slider for you. In this blog, there are four sections on the webpage, in the first section you can get the overview of the blog, in the second section there are few more coding blogs you might like,in the third section you can try it by yourself by using the button, after that you can copy the code and paste it [that's the fourth section]

You might like this :

Budget Calculator - using JS (JavaScript) and Bootstrap
Few days ago
How to check if the radio button is checked using JavaScript
Few days ago
Password Strength meter using JS
Few days ago
Email Validation using HTML, CSS and JavaScript
Few days ago
Social media icons with hover effect(Pure CSS)
Few days ago




Step 1) Add your HTML Code -

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>Image Slider - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com -->
<body>
<div class="slideshow">
<div class="slide-wrapper-cwb">
<div class="slide-cwb"></div>
<div class="slide-cwb"></div>
<div class="slide-cwb"></div>
<div class="slide-cwb"></div>
<div class="slide-cwb"></div>
</div>
</div>
</body>
</html>
Copy Contents

Step 2) Add your CSS Code -

CSS Code

<style>
.slideshow {
overflow: hidden;
height: 500px;
width: 728px;
margin: 0 auto;
}
.slide-wrapper-cwb {
width: 3000px;
-webkit-animation: slide 18s ease infinite;
}
.slide-cwb{
margin-top: 50px;
float: left;
height: 500px;
width: 728px;
}
.slide-cwb:nth-child(1) {
background-image: url("https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1440&q=80") ;
}
.slide-cwb:nth-child(2) {
background-image: url("https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=751&q=80") ;
}
.slide-cwb:nth-child(3) {
background-image: url("https://images.unsplash.com/photo-1433086966358-54859d0ed716?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80") ;
}
.slide-cwb:nth-child(4) {
background-image: url("https://images.unsplash.com/photo-1586348943529-beaae6c28db9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=358&q=80") ;
}
@-webkit-keyframes slide {
20% {margin-left: 0px;}
30% {margin-left: -728px;}
50% {margin-left: -728px;}
60% {margin-left: -1456px;}
70% {margin-left: -1456px;}
80% {margin-left: -2184px;}
90% {margin-left: -2184px;}
}
</style>
Copy Contents
Image Source: unsplash.com