Demo - Slider mit 3 Bildern

CSS-Bildwechsler: Hier sehen Sie, das oben im Kopfbereich 3 Fotos eingebaut sind. Hier nachstehend der HTML-Code für 3 Bilder:

HTML-Style:

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

<div class="pics pic-a-01">
<span class="inhalt"><i>1 / 3</i></span>
</div>
<div class="pics pic-a-02">
<span class="inhalt"><i>2 / 3</i></span>
</div>
<div class="pics pic-a-03">
<span class="inhalt"><i>3 / 3</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) }

CSS
#slider-3-pics {
width: 300%;height:100%;
ANIMATION: slide-3-pics 60s infinite;
}
#slider-3-pics .pics {width: 33.33%;
float: left;
}

@keyframes slide-3-pics {

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

33.33% { transform: translateX(-33.33%) }
63%     { transform: translateX(-33.33%) }

66.66% { transform: translateX(-66.66%) }
96%     { transform: translateX(-66.66%) }

}