반응형 슬라이더
플렉스박스로 해결
<!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.
Reference
이 문제에 관하여(반응형 슬라이더), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/frankwisniewski/responsive-slider-3pe7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
