Warum hüpft der Slider?

  • Guten Morgen Andreas,

    ja, die haben alle die gleiche Größe. Ich hatte vergessen zu erwähnen, das dies nur bei einer Auflösungsbreite ab 1482px und darunter geschieht. Im CSS ist die Höhe auf "auto".
    Bei jedem Bildwechseln zieht es das folgende Sliderbild ein wenig runter. Dann springt es wieder zurück. Dies passiert beim Firefox und IE.
    Beim Opera ist es ganz katastrophal. Da zieht es das nachfolgende Sliderbild gleich auf die volle Orginalhöhe des Bildes runter und springt dann wieder hoch.

    Die einzigen Browser wo alles so ist, wie es sein soll, sind der Chrom und Safari.

    Okay, ich geb's auf. Das liegt dann wohl an den Browserherstellern, was für eine Information zuerst im jeweiligen Browser verarbeitet wird. Oder?

  • Slider hat ein call to action, ( CATCH ME IF YOU CAN ;)

    Nein hat etwas zu tun mit glaube ich den container höhe wo er drin ist beim laden jeden neues bild, dachte mir dass es nach ein bestimmte update behoben war, weil war auch mal so auf den demo seite von comseo.

    Also version template auch updated?

    Dan admin vielleicht fragen wen man es nicht finden kan, bitte wene behoben hier den wie posten?


    Oder den bilder sind wen scaled doch höher dan container selbst, die danach dan über den unter teil geht, sowass kommt auch vor also den bildverhaltung soll oder dort stimmen oder etwas in css oder slider settings ( ist nicht in shopadmin aber css und js) muss angepasst weerden

    2 Mal editiert, zuletzt von jotest (16. September 2014 um 10:44)

  • Habe es noch nicht gefunden. Wenn man aber den Slider mal langsam durchlaufen lässt (transition: ease-in-out 2s), sieht man, dass das vorhergehende Bild hüpft. Der Browser stellt kurz bevor das nächste Bild kommt, dass erste Bild auf Orginalgröße (In Breite und Länge).

    Da scheint es, dass der IE und der Firefox soooo aufgeregt, auf das nächste Bild sind, dass diese vergessen, wie das vorhergehende Bild darzustellen ist, nähmlich (width: 100% und height: auto). ---Lach ;)

  • Habe es gefunden. War eigendlich gar nicht so schwer.

    In die reset.css folgendes rein:

    .carousel-inner img {width: 100%;}

    normalerweise müsste es vielleicht so rein:

    .carousel-inner img {width: 100%; max-width: 100%; height: auto;}

    aber die Höhe und max-Breite nimmt es bei mir von dem hier: .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img

    Steht manchmal auch ganz schöner Quatsch in den Templates. Entweder es fehlt was oder sie sind unnötig vollgestopft.

  • Hallo,

    an welcher Stelle muss man das

    .carousel-inner img {width: 100%; max-width: 100%; height: auto;}

    einfügen? Muss man sonnst noch was ändern?

    Gruß, Carsten

  • Sieh mal in Deinen Templateordner, Unterordner CSS. Kommt auf Dein Template an. Bei den responive Templates mit bootstrap, die Datei reset.css mit Notpad öffnen und die ID .carousel-inner img suchen. Das kommt aber auf Dein Template an. Wie ist Deine Domain?

  • Hallo,
    also bei mir steht in der reset.css folgendes
    .carousel-inner > .item > img,
    .carousel-inner > .item > a > img {
    display: block;
    max-width: 100%;
    height: auto;
    }

    was muss ich denn jetzt ändern das der slider nicht mehr zuckt ?

    mfg steinchen

  • Hallo,

    bei mir sieht es auch so aus.

    .carousel-inner > .item > img,
    .carousel-inner > .item > a > img {
    display: block;
    max-width: 100%;
    height: auto;
    }

    Cache leer gemacht und auch Browser Cache leer gemacht?
    Bilder müssen die gleiche Höhe haben!

    Gruß

  • Das hüpfen beim zusammen schieben ist aber normal.
    Generell: Die Bilder sollten immer die gleichen Masse haben und die maximale Breite, die der jeweilige Container hat.

    <p>Wir geben nur Anregungen und Hilfestellung auf Basis unserer Erfahrung, keine Rechtshilfe!<br>\m/('_')\m/</p>

  • Da muss ich leider widersprechen. Das der Slider beim zusammenschieben hüpft ist nicht normal. Das hängt aber auch mit den verschiedenen Browsern zusammen.

    Ich kenne Dein Template nicht (habe es nur mal mit dem Entwicklerwerkzeug im Browser getestet), aber baue einfach folgendes Element, entweder in die reset.css oder in die stylesheet.css im Template ein:

    .carousel-inner img {width: 100%;}

    Man muss dem Browser während der aktiven Umschaltung (bei dir alle 0.6s) zum nächsten Bild sagen, wie groß das Bild sein soll, sonst ragt es über den Container beim zusammenschieben hinaus. Das ist zumindest beim Firefox und beim IE so. Beim Chrom hüpft nichts.

    Zur Zeit finde ich den Chrom-Browser auch am besten, weil er W3C-Standards am besten umsetzt.
    Chrom macht aber Probleme mit der !important-Regel. Die ignoriert der Chrom manchmal einfach. Aber das ist sicher so gewollt. Es ist sowieso besser alles in ID's und Klassen unterzubringen, als die !important-Regel zu verwenden. Entschuldigung, ich schweife ab....

  • Das hatte ich ja gemeint, aber die Information für die "max-width" und "height" steht bei den bootstrap-templates (reset.css) in folgenden Block:

    Zitat

    .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img

    Das wären doppelte Informationen, die nur die css-datei unnötig aufblähen.

    Also einfach nur

    Zitat

    .carousel-inner img {width: 100%;}

    Problem ist jetzt zum zweiten mal gelöst. :thumbup: