Demo - Slider mit 5 Bildern

CSS-Bildwechsler: Schauen Sie oben im Kopfbereich, es sind 5 Fotos eingebaut. So wie im Original-Template. Hier nachstehend trotzdem nochmal zur Info der HTML-Code für 5 Bilder:

HTML-Style:

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

<div class="pics pic-a-01">
<span class="inhalt"><i>1 / 5</i></span>
</div>
<div class="pics pic-a-02">
<span class="inhalt"><i>2 / 5</i></span>
</div>
<div class="pics pic-a-03">
<span class="inhalt"><i>3 / 5</i></span>
</div>
<div class="pics pic-a-04">
<span class="inhalt"><i>4 / 5</i></span>
</div>
<div class="pics pic-a-05">
<span class="inhalt"><i>5 / 5</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/logo01.jpg) }

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

.pic-a-05 {background-image:url(../images/logo05.jpg) }

CSS
#slider-5-pics {
width: 500%;height:100%;
ANIMATION: slide-5-pics 60s infinite;
}
#slider-5-pics .pics {width: 20%;
float: left;
}

@keyframes slide-5-pics {

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

20% { transform: translateX(-20%) }
37% { transform: translateX(-20%) }

40% { transform: translateX(-40%) }
57% { transform: translateX(-40%) }

60% { transform: translateX(-60%) }
77% { transform: translateX(-60%) }

80% { transform: translateX(-80%) }
98% { transform: translateX(-80%) }

}