Slider erscheint erst nach Aktualisierung bzw. gar nicht korrekt

Hallo,

eigentlich wollte ich endlich wieder mal ein Projekt mit der dk_caroufredsel Erweiterung umsetzen - soll wohl nicht sein :(

folgendes Verhalten:
Der Slider wird im Mozilla Firefox (auf zwei unabhängigen Systemen getestet) beim ersten (!) Aufruf der Seite insofern falsch angezeigt, dass zwei von drei Bildern nebeneinander angezeigt werden und sich damit den Viewport teilen » Höhe wird dementsprechend geringer als gewollt und zwei Bilder sind sichtbar.
Erst nach dem erstmaligen Aktualisieren der Seite formt sich der Slider so wie er gedacht ist » 1 Bild im Viewport und die korrekte Grösse und deren Seitenverhältnis

Im Chrome und Vivaldi wird überhaupt nur etwa 1 cm (Pixelhöhe habe ich nicht gemessen) des oberen Rand des Bildes angezeigt. Auch nach einer Aktualisierung wird's nicht mehr. Aber es wird nur 1 Bild (bzw. der oberer Streifen davon) angezeigt und das in voller Viewportbreite.

Ist das ein Bug, oder hab ich in meinen Einstellungen irgendwo einen Fehler?

zur Umgebung:
Contao 3.4.4
dk_caroufredsel über composer installiert
drei Bilder

Ich habe für die Punkte 'Grösse des Karussells' und 'Grösse der Elemente' nichts eingetragen, also auch kein Häkchen gesetzt.
Bei 'Darstellung der Elemente' habe ich 'Reponsive' angehakt.
Liegt es evtl. an diesen Einstellungen? "Experimente" mit einigen der Einstellungen haben mich nicht weitergebracht.
Meine Überlegung: ich verwende grid12, also müssten sich die Grössen mit den grids und dem Haken bei Responsive selbst ergeben. Oder ist diese Überlegung falsch - falls ja, was wären die korrekten Einstellungen dazu? also bei den nicht angehakten Punkten?

In den Einstellungen:
onDocumentReady
Haken bei 'Image Loader verwenden'

... bin wohl etwas überfordert mit diesem Slider :rolleyes:

Hat jemand Hilfe für mich?

Firefox - beim ersten Aufruf
Anhang 15489
Firefox - nach dem Aktualisieren
Anhang 15490
Vivaldi und Chrome
Anhang 15491
Einstellungen
Anhang 15492

Hallo,

niemand eine Idee?

... ich habe jetzt mal den core-Slider eingefügt, der tut's jetzt auch mal für dieses Projekt.
Wäre aber trotzdem dankbar, wenn mir hier jemand weiterhelfen könnte, damit ich das Problem bei einem weiteren Projekt auch verstehen und damit lösen kann.

Danke!

du mußt auf jeden Fall auf "readyLoad" umstellen. Das mit der schrumpfenden Höhe sind Browser-Fehlverhalten, die nie gefixt wurden bisher. Beim Laden der Bilder liefert der Browser an jQuery dann keine Bildhöhe, aber das Script wird schon initialisiert und berechnet schon die Größen (wegen onDocumentReady).

Prima! DANKE!
... so passt das jetzt :)

Dafür gibt es unter anderem das feine imagesLoaded (https://github.com/desandro/imagesloaded), das das noch viel besser macht als readyLoad. Bin leider bisher nie dazu gekommen es einzubauen.

Hallo zusammen,

ich würde den Thread hier gerne nochmals aktivieren. Ich habe den Caroufredsel bei mehreren Projekten seit längerem im Einsatz. Nun stelle ich dasselbe Problem bei einer Website fest: erst nach dem Aktualisieren wird der Slider komplett und korrekt angezeigt, davor sind drei Bildchen nebeneinander zu sehen.

Ganz offensichtlich brauch ich auch diese ReadyLoad-Ding wie oben beschrieben. Aber kann mir vielleicht ein Profi helfen wo ich das finde? Alles durchgeschaut. Oder wo und exakt wie, ich das einbinden muss??

Das wäre echt klasse, DANKE :-)

Ich glaube das ist ne Einstellung irgendwo im BE. Soll dafür sorgen, dass der Slider nicht gestartet wird wenn der DOM geladen ist, sondern erst nachdem alles geladen ist. Im Hintergrund passiert dabei folgendes.

PHP-Code:

---

/*  JS - jQuery */

// DOM
(function($) {
  $(document).ready(function() {

// Alles
(function($) {
  $(document).on('load', function() { 


---

Hallo Marion,

das findest du in den Einstellungen relativ weit unten -> siehe Screenshot.
Das taucht erst auf wenn du den Konfigurations-Modus auf erweitert umstellst.