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

    }