Demo - Slider mit 4 Bildern

CSS-Bildwechsler: Schauen Sie oben im Kopfbereich, es sind 4 Fotos eingebaut. Hier nachstehend der HTML-Code für 4 Bilder:

HTML-Style:

HTML
<div id="slider-4-pics">

<div class="pics pic-a-01">
<span class="inhalt"><i>1 / 4</i></span>
</div>
<div class="pics pic-a-02">
<span class="inhalt"><i>2 / 4</i></span>
</div>
<div class="pics pic-a-03">
<span class="inhalt"><i>3 / 4</i></span>
</div>
<div class="pics pic-a-04">
<span class="inhalt"><i>4 / 4</i></span>
</div>

</div>

CSS-Style:

Sie finden den CSS-Code für die Slideshow in der Datei 'animation.css'. Hier nachstehend der Code für die Animation:

CSS
/* Slideshow-Bilder hier festlegen */

.pic-a-01 {background-image:url(../images/logo03.jpg) }

.pic-a-02 {background-image:url(../images/logo02.jpg) }

.pic-a-03 {background-image:url(../images/logo04.jpg) }

.pic-a-04 {background-image:url(../images/logo01.jpg) }

CSS
#slider-4-pics {
width: 400%;height:100%;
ANIMATION: slide-4-pics 60s infinite;
}
#slider-4-pics .pics {width: 25%;
float: left;
}

@keyframes slide-4-pics {

0% { transform: translateX(0) }
22% { transform: translateX(0) }

25% { transform: translateX(-25%) }
47% { transform: translateX(-25%) }

50% { transform: translateX(-50%) }
72% { transform: translateX(-50%) }

75% { transform: translateX(-75%) }
97% { transform: translateX(-75%) }

}