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

    }