solved with flex-box
<!DOCTYPE html>
<html lang=de>
<meta charset=UTF-8>
<title>Document</title>
<style>
body{
font-family:system-ui, sans-serif,sans-serif;
}
.fhwslider {
width: 90%;
margin:auto;
position: relative;
overflow: hidden;
background: black;
display: flex;
flex-direction: row;
}
.fhwslider h2, .fhwslider p{
color:white;
padding: 0em 10% 0 10%;
text-align: center;
}
.fhwslider div {
min-width:100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: center;
transform: translateX(-100%);
animation: fhwsliderani 24s ease-in-out 0s infinite;
}
.fhwslider > div:nth-child(1) {
animation-delay: -4s;
}
.fhwslider > div:nth-child(2) {
animation-delay: 4s;
margin-left:-100%;
}
.fhwslider > div:nth-child(3) {
animation-delay: 12s;
margin-left:-100%;
}
@keyframes fhwsliderani {
8.33333% {transform: translateX(0);}
33.3333337% {transform: translateX(0);}
41.6666667% {transform: translateX(100%);}
100% {transform: translateX(100%);}
}
</style>
<h1>responsive Slider</h1>
<h2>solved with flexbox</h2>
<div class=fhwslider>
<div>
<h2>Lorem1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque molestiae voluptatibus consequuntur aperiam minima iure repudiandae mollitia accusamus vel explicabo.
</div>
<div>
<h2>Lorem 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque molestiae voluptatibus consequuntur aperiam minima iure repudiandae mollitia accusamus vel explicabo.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque molestiae voluptatibus consequuntur aperiam minima iure repudiandae mollitia accusamus vel explicabo.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque molestiae voluptatibus consequuntur aperiam minima iure repudiandae mollitia accusamus vel explicabo.
</div>
<div>
<h2>Lorem 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque molestiae voluptatibus consequuntur aperiam minima iure repudiandae mollitia accusamus vel explicabo.
</div>
</div>
<p>Lorem ipsum dolor sit amet.
Top comments (0)