Image sliders are usually built with JavaScript, but with the release of CSS, this can now also be done with pure CSS. In this post, we'll look at how to build a slideshow effect with the bare minimum of CSS code, and then we'll look at how to make image sliders with JavaScript in the second half. So, let's get to the meat of their argument below.
On a picture slider web page, we usually generate HTML and javascript. But today I'm going to show you how to make an image slider without javascript using HTML and CSS.
The main purpose of this is to beautify the website by using a picture slider. Then it would be beneficial for those who participate in HTML and CSS competitions.
Requirements for creating an image slider using HTML and CSS.
- Compiler for local server/online
- IDE (integrated development environment).
Only a small portion of these is in HTML, and the rest is in CSS. In this case, we must pay close attention to the animation's attributes. The key reason the picture animation works is because of the values and attributes provided in the animation.
Here Our Code Goes
We are Doing Internal CSS here. Let's Look our Code
<html>
<head>
<meta charset="utf-8">
<title>
</title>
</head>
<body>
<h1>Image Slider</h1>
<center><div class="images"></div></center>
</body>
<style>
body{
background:linear-gradient(black,red);
background-size:cover;
}
h1{
color:white;
text-align:center;
text-shadow:4px 4px 4px red;
}
.images{
background-image:url('https://i.guim.co.uk/img/static/sys-images/Football/Pix/pictures/2013/4/3/1365006555542/David-Beckham-Paris-Saint-008.jpg?width=605&quality=85&auto=format&fit=max&s=4913655324b1cd0aa1fae432d97a497d');
width:460px;
height:600px;
background-size:110%;
background-repeat:no-repeat;
margin-left:10px;
animation:mymove 10s infinite;
}
@keyframes mymove{
0%{background-image:url("https://qph.fs.quoracdn.net/main-qimg-38e49923908b2ca86c73efab5f93881b");}
25%{background-image:url("https://th.bing.com/th/id/OIP.q9vMig-OrRwUU3WtvnpeBAHaEK?pid=ImgDet&rs=1");}
50%{background-image:url("https://manunitednewsnow.com/wp-content/uploads/2019/04/1119855_1.jpg");}
75%{background-image:url("https://i.ytimg.com/vi/slzjRyQQuzw/hqdefault.jpg");}
90%{background-image:url("https://www.telegraph.co.uk/content/dam/world-cup/2018/06/15/TELEMMGLPICT000166167972_trans_NvBQzQNjv4BqKutH9T4LB0mU7ExMWwW8NEzAi0FLhEqQAZjAtduiueQ.jpeg?imwidth=450");}
}
}
</style>