slider html css | How to Create Slideshow
HTML
<html>
<head>
<title>IPL 2K20</title>
</head>
<body>
<div class="wrapper">
<div class="slider">
<div class="slide">
<img src="virat.png"><br>
<h3>Royal Challengers Bangalore(RCB)</h3>
<img src="dhoni.png.png">
<h3>Chennai Super Kings(CSK)</h3>
<img src="klrahul.png">
<h3>Kings XI Punjab(KXIP)</h3>
<img src="smith.png">
<h3>Rajsthan Royals(RR)</h3>
<img src="iyer.png">
<h3>Delhi Capitals(DD)</h3>
<img src="kaartik.png">
<h3>Kolkata Knight Riders(KKR)</h3>
<img src="kane.png">
<h3>Sunrisers Hyderabad(SRH)</h3>
<img src="rohit.png">
<h3>Mumbai Indians(MI)</h3>
</div>
<div class="slide">
<img src="virat.png"><br>
<h3>Royal Challengers Bangalore(RCB)</h3>
<img src="dhoni.png.png">
<h3>Chennai Super Kings(CSK)</h3>
<img src="klrahul.png">
<h3>Kings XI Punjab(KXIP)</h3>
<img src="smith.png">
<h3>Rajsthan Royals(RR)</h3>
<img src="iyer.png">
<h3>Delhi Capitals(DD)</h3>
<img src="kaartik.png">
<h3>Kolkata Knight Riders(KKR)</h3>
<img src="kane.png">
<h3>Sunrisers Hyderabad(SRH)</h3>
<img src="rohit.png">
<h3>Mumbai Indians(MI)</h3>
</div>
</div>
</div>
</body>
</html>
CSS
<style>
html,
body {
margin: 0;
width: 100%;
height: 100%;
}
body {
background-color: #c1e0e8;
}
.wrapper {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.slider {
width: 1000px;
height: 100px;
position: relative;
background: white;
border-radius: 10px;
background-image: linear-gradient(#feeb66, #c7f7f7);
box-shadow: 0px 0px 2px #5f5f5f, 2px 2px 6px chocolate, -2px -2px 6px gray;
display: flex;
overflow: hidden;
}
.slide {
height: 100px;
display: flex;
align-items: center;
font-family: 'Loto', sans-serif;
color: black;
animation: slideshow 8s linear infinite;
}
.slide img {
height: 70px;
padding: 0 30px 0 30px;
}
@keyframes slideshow {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
.slider::before,
.slider::after {
height: 100px;
width: 200px;
position: absolute;
content: "";
background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
z-index: 2;
}
.slide::before {
left: 0;
top: 0;
}
.slide::after {
right: 0;
top: 0;
transform: rotateZ(180deg);
}
</style>
Post a Comment