## 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%) }

    }