Responsiver Slider
Codepen
Erläuterungen zum nachfolgenden Quellcode
Der CSS-Teil des Codes enthält die Stilregeln, die das Aussehen der HTML-Elemente definieren. Hier ist eine Erklärung für jede Regel:
-
body: Diese Regel definiert den Stil für den gesamten Inhalt desbody-Elements. Hier wird die Schriftart aufsystem-ui, sans-seriffestgelegt, was eine systemabhängige Standardschriftart oder eine Standardschriftart ohne Serifen verwendet. -
.fhwslider: Diese Regel definiert den Stil für das Element mit der Klassefhwslider, das den Slider-Bereich enthält. Hier wird die Breite auf 90% des verfügbaren Platzes festgelegt undautofür die horizontale Zentrierung verwendet. Das Element hat eine relative Position und einen schwarzen Hintergrund. Es verwendet das Flexbox-Layout (display: flex) mit einer horizontalen Ausrichtung (flex-direction: row). -
.fhwslider h2, .fhwslider p: Diese Regel definiert den Stil für dieh2- undp-Elemente innerhalb desfhwslider-Bereichs. Die Textfarbe wird auf Weiß gesetzt, der Text hat horizontalen Innenabstand von 10% und eine zentrierte Ausrichtung. -
.fhwslider div: Diese Regel definiert den Stil für diediv-Elemente innerhalb desfhwslider-Bereichs. Die minimale Breite wird auf 100% festgelegt, und das Flexbox-Layout wird mit horizontaler Ausrichtung, Umbruch und zentrierter Ausrichtung sowohl horizontal als auch vertikal angewendet. Das Element wird um 100% nach links verschoben (transform: translateX(-100%)), und eine Animation namensfhwslideraniwird mit einer Dauer von 24 Sekunden, einer "ease-in-out" Übergangsfunktion und einer Wiederholung ohne Ende festgelegt. -
.fhwslider > div:nth-child(1),.fhwslider > div:nth-child(2),.fhwslider > div:nth-child(3): Diese Regeln definieren den Stil für die ersten dreidiv-Elemente direkt innerhalb desfhwslider-Bereichs. Sie legen die Verzögerung der Animation fest und verschieben die Elemente horizontal um 100% nach links (margin-left: -100%) für die gewünschte Reihenfolge. -
@keyframes fhwsliderani: Diese Regel definiert die Animation namensfhwsliderani. Sie enthält verschiedene Schlüsselbild-Zustände (Keyframes) für die Animation. In diesem Fall gibt es vier Zustände: bei 8,33% und 33,33% ist die X-Verschiebung 0%, bei 41,67% und 100% ist die X-Verschiebung 100%. Dadurch entsteht eine Animation, bei der die Slider-Elemente über den Bildschirm gleiten.
Diese CSS-Regeln arbeiten zusammen, um den Slider-Bereich zu stylen und die Animation zu steuern, während die h1, h2, p und div-Elemente innerhalb des Sliders formatiert werden.
<!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.