Image slider is made with HTML and CSS and it creates a nice slideshow effect for you
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
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
It has many advantages e.g. you can make portfolio with this, you can make automatic carousel with it, you can make testimonial 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]
<!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>
<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>