Slider Probleme

  • Html Code


    <div id="outerbox">
    <div id="sliderbox">
    <img src="image/Xiaomi.jpg">
    <img src="image/Xiaomi2.jpg">
    <img src="image/Xiaomi.jpg">
    <img src="image/Xiaomi2.jpg">
    <img src="image/Xiaomi.jpg">
    </div>
    </div>


    css Code


    #outerbox {
    width: 100vw !important;
    height: 60vh;
    overflow:hidden;
    }
    #sliderbox {
    position:relative;
    width:6000px;
    animation-name:sliding;
    animation-duration:20s;
    animation-iteration-count:infinite;
    }


    #sliderbox img {
    float:left;
    }


    @keyframes sliding {
    0%{
    left:0px;
    }
    20% {
    left:0px;
    }
    25% {
    left:-1200px;
    }
    45% {
    left:-1200px;
    }
    50% {
    left:-2400px;
    }
    70% {
    left:-2400px;
    }
    75% {
    left:-3600px;
    }
    95% {
    left:-3600px;
    }
    100% {
    left:-4800px;
    }
    }



    ich versuche einen Slider zu erstellen, der über die gesamte breite des Bildschirmes verläuft und eine Höhe von etwa 60% der Bildschirmhöhe enthält.
    Die Höhe habe ich ganz gut hinbekommen doch leider erscheinen die Bilder nicht über die gesamte Bildschirmbreite. Kann mir da jmd. weiterhelfen???
    Ich möchte hier ungerne Pixelangaben machen, sondern vielmehr mit Prozenten arbeiten. Sprich 100% Breite und 60% Höhe des gesamten Bildschirmes.


    Danke im Voraus.

  • Du hast schon richtig erkannt: Wenn Du dein Ziel erreichen willst, musst Du konsequent mit Prozent- statt Pixel-Angaben arbeiten. Ich habe es mal so gemacht:

    Ist sicherlich eine interessante Aufgabe, so etwas nur mit CSS zu machen, aber ich finde, nicht alles, was machbar ist, ist auch sinnvoll. Vor allem die Änderungsfreundlichkeit beim Hinzufügen neuer Bilder lässt zu wünschen übrig, weil man alle Prozentangaben neu berechnen muss. Bei einem Slider mit Javascript ist es kein Problem, ihn so anzulegen, dass man nur die Bilder hinzu fügt und alles andere passt sich automatisch an.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!