CSS Slider Beispiel

CSS Code Slider

hier ein Beispiel

#slider {
background: #fff;
border: 0px solid;
border-color: #49a349;
border-bottom-left-radius: 5% 5%;

box-shadow: 0 5px 0 #49a349;
box-sizing:border-box;
height: 160px;
width: 100%;
margin: 1px auto 0;
overflow: hidden;
position: relative;
}

#slider .img {

margin-right: 50px;
}

#slider .animate1 {
animation: cycle1 25s linear infinite;
}

#slider .animate2 {
animation: cycle2 25s linear infinite;
}

#slider .animate3 {
animation: cycle3 25s linear infinite;
}

#slider .animate4 {
animation: cycle4 25s linear infinite;
}

#slider .animate5 {
animation: cycle5 25s linear infinite;
}

#slider figure {
width: 150px; /* Breite des Bildes */
height: 150px; /* Höhe des Bildes */
position: absolute;
margin: 0;
bottom: 0px; /* Originalposition – Nicht im sichtbaren Ausschnitt */
left: calc(50% – 360px); /* Setzt Bild in die Mitte des sichtbaren Ausschnitts */
}

@keyframes cycle1 {
0% { top: 0px; } /* Am Anfang der Slideshow ist das erste Bild sichtbar */
4% { top: 0px; } /* Bild steht noch auf der Startposition */
16% { top: 0px; opacity:1; z-index:0; } /* Von 4% bis 16 % ist das Bild für 3 Sekunden sichtbar */
20% { top: -325px; opacity: 0; z-index: 0; } /* Von 16% bis 20% = 1 Sekunde für Slide Out */
21% { top: 325px; opacity: 0; z-index: -1; } /* Zurück auf die Originalposition */
92% { top: 325px; opacity: 0; z-index: 0; }
96% { top: 325px; opacity: 0; } /* Von 96% bis 100% = 1 Sekunde für Slide In */
100%{ top: 0px; opacity: 1; }
}

@keyframes cycle2 {
0% { top: 325px; opacity: 0; } /* Originalposition außer Sicht */
16% { top: 325px; opacity: 0; }/* Beginnt mit der Bewegung */
20% { top: 0px; opacity: 1; }
24% { top: 0px; opacity: 1; } /* Von 20% bis 24% = 1 Sekunde für Slide In */
36% { top: 0px; opacity: 1; z-index: 0; } /* Von 24% bis 36 % = Bild für 3 Sekunden sichtbar */
40% { top: -325px; opacity: 0; z-index: 0; } /* Von 36% bis 40% = 1 Sekunde für Slide Out */
41% { top: 325px; opacity: 0; z-index: -1; } /* Zurück auf die Originalposition */
100%{ top: 325px; opacity: 0; z-index: -1; }
}

@keyframes cycle3 {
0% { top: 325px; opacity: 0; }
36% { top: 325px; opacity: 0; }
40% { top: 0px; opacity: 1; }
44% { top: 0px; opacity: 1; }
56% { top: 0px; opacity: 1; }
60% { top: -325px; opacity: 0; z-index: 0; }
61% { top: 325px; opacity: 0; z-index: -1; }
100%{ top: 325px; opacity: 0; z-index: -1; }
}

@keyframes cycle4 {
0% { top: 325px; opacity: 0; }
56% { top: 325px; opacity: 0; }
60% { top: 0px; opacity: 1; }
64% { top: 0px; opacity: 1; }
76% { top: 0px; opacity: 1; z-index: 0; }
80% { top: -325px; opacity: 0; z-index: 0; }
81% { top: 325px; opacity: 0; z-index: -1; }
100%{ top: 325px; opacity: 0; z-index: -1; }
}

@keyframes cycle5 {
0% { top: 325px; opacity: 0; }
76% { top: 325px; opacity: 0; }
80% { top: 0px; opacity: 1; }
84% { top: 0px; opacity: 1; }
96% { top: 0px; opacity: 1; z-index: 0; }
100%{ top: -325px; opacity: 0; z-index: 0; }
}

.progress-bar {
position: relative;
top: -5px;
width: 680px;
height: 5px;
background: firebrick;
animation: fullexpand 25s ease-out infinite;
}

@keyframes fullexpand {
/* Anfang: Fortschrittsbalken steht ist nicht sichtbar */
0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }

/* Fortschrittsbalken bereit zum Start */
4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }

/* Fortschrittsbalken läuft 3 Sekunden an */
16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }

/* Fortschrittsbalken hat Ende erreicht */
17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }

/* Fortschrittsbalken wird unsichtbar und beginnt einen neuen Durchlauf */
18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}

#slider .label {

background: hsla(0,0%,100%,0.5);

box-sizing: border-box;
position: absolute;
padding-top: 5px;
height: auto; width: auto;
padding-left: 1em; top: 1em; padding-right: 20px;

border: 0px;

bottom: 0;

margin: 0;
color: #000000;

font-size: 14px;
text-align:left;
font-style:normal;

transition: left 0,3s ease-in-out;
}

/*ende bsu slider*/

Der dazugehörige HTML Code

<div id=“slider“>
<div id=“onframe“>
<figure class=“animate1″><img class=“size-full wp-image-1621 alignleft“ src=“https://domain/wp-content/uploads/bild.jpg“ alt=““ width=“120″ height=“109″ /><br><figcaption class=“label“><strong><span style=“color: #339966;“>Überschrift</span></strong><br><br>
beschreibung1.<br>
beschreibung2<br>

<hr />

</figcaption></figure>

<figure class=“animate2″><img class=“size-full wp-image-1613 alignleft“ src=“https://domain/wp-content/uploads/bild2.jpg“ alt=““ width=“100″ height=“60″ /><bR><figcaption class=“label“><strong>
<span style=“color: #339966;“>Überschrift</span></strong><br><br>
text text

<hr />

</figcaption></figure>
</div>
</div>