Bilderslider: bei Aufruf der Seite mehr als ein Bild zu sehen

Hallo,

ich habe den Slider zum Sliden einiger Bilder eingebaut - funktioniert alles prima!

dk_caroufredsel 1.2.3 stable
Contao 3.1.3

Aber: wenn die Seite aufgebaut wird (ohne Browser Cache z.B. Strg+F5) sieht man kurzzeitig das zweite Bild unter dem Ersten.

Ich habe schon einiges mit den "Größen der Elemente" und "Größe des Karussells" experimentiert, bekomme aber den Effekt nicht weg.

Die Bilder haben alle eine einheitliche Größe, es wird immer nur 1 angezeigt und soll Responsive sein.

Der Launch der Seite folgt demnächst - Link dahin gern per PN wenn notwendig...

Anbei meine Einstellungen als Screenshot:

Gruss

Hallo zonky

Hast Du in den Einstellungen auch schon eine andere Startmethode versucht?

ja - an der Stelle habe ich auch experimentiert...

das "beste" Ergebnis habe ich mit "readyLoad" - siehe Screenshot

Habe eben Dein Bild im #1 nochmals angeschaut. Ich (nur Anwender, kein Programmierer) kann keinen Zusammenhang zwischen diesem und dk_caroufredsel sehen. Das Bild würde ich eher inserttags zuordnen.

Ein Ausschintt aus meinen dk_caroufredsel-Einstellungen

upps - falsches Bild => geändert...

sieht leider etwas krischelig aus, da Beschränkung auf 100kB im Forum :-(

In der Schnelle fällt mir beim Vergleich Deines Bildes mit meinem auf, dass Du keine Karussellgrösse definiert hast.

ich habe mal das Karussell auch auf feste Breite und variable Höhe gesetzt - der Flattereffekt bleibt :-(

Der Effekt "Abspiel-Position merken" scheint hier nicht so sicher zu funktionieren, wie bei anderen Slidern - das erste Bild wird erst kurz angezeigt und dann springt der Slider zum letzten Bild was angezeigt wurde

Wenn ich die Seite neu lade, erscheint im Bereich der Bilder ein Text mit Dateinamen ohne Unterstriche - siehe Screenshot - die Dateinamen sind dialysezentrum_zehlendorf_H_01.jpg dialysezentrum_zehlendorf_H_02.jpg usw.

ich glaube ich habe eine/die Lösung: bei mir ist die CSS-Klasse block nicht gesetzt (mit overflow:hidden)

Das overflow:hidden wir somit den Slider-Divs recht spät nochmal zugeordnet - habe dem .ce_caroufredsel_gallery im CSS das overflow zugewiesen und nun scheints zu gehen...

Bei meinem Beispiel ist es umgekehrt: Breite variabel, Höhe fest.

CSS-mässig habe ich nur alle 4 margin-Werte für img definiert, sonst nichts.

hmm... overflow wars noch nicht... :-(

die Texte aus #7 sind die alt-Attriibut Angaben der Bilder

Hallo Zonky,

das Problem hat nichts unmittelbares mit dem Slider zu tun. Die Initialisierung findet zum (jQuery-)Zeitpunkt statt, wenn das komplette HTML geladen und der DOM aufgebaut wurde. Da die Browser aber schon während des Ladens anfangen die Seite zu layouten kommt es häufig vor, daß dieser "FOUC" auftritt (http://en.wikipedia.org/wiki/Flash_of_unstyled_content).

Du könntest in diesem Fall den Slider vorher mit CSS verstecken und mit einer Zeile jQuery dann aufdecken, wenn er initialisiert wurde. Das sollte den Effekt verhindern, z.B. in dem du dafür die Klasse "invisible" missbrauchst, die genau das macht und dann im js-Template an die jQuery-Chain ein .removeClass('invisible') anhängst.

Bzgl. des nicht korrekt merken der Slider-Posi nach dem Reaload kann ich nichts zu sagen. In meinen Tests hatte das bisher funktioniert, aber das muß ja nichts heißen. =) Wichtig ist allerdings, daß Cookies erlaubt sind.

Viele Grüße...
...Dirk

nun hab ich´s glaube ich...

ich habe dem "Wrapper"-Div mit Klasse caroufredsel eine feste Höhe und overflow:hidden im "statischen" CSS verpasst - damit ist nur das Erste Bild zu sehen.

Die Werte für Höhe/Breite werden eh per Javascript überschrieben, wenn responsive eingestellt.

Vorteil: wenn kein Javascript aktiviert, sieht man nicht eine ewige Liste mit Bildern sondern nur das Erste...