Verwendung: Manuelle Slider Initialisierung & responsive Darstellung

Elke's Avatar

Elke

11 Oct, 2024 09:32 AM

Produkt: Slider Pro Contao
Contao-Version: 5.3.15

Ich möchte ein News Teaser Karusell manuell einbinden und für unterschiedliche Breiten unterschiedliche Einstellungen anlegen.

Gibt es da eine Möglichkeit dazu?
Oder gibt es eine Liste aller Optionen für den Slider?

  1. Support Staff 1 Posted by RockSolid Theme... on 11 Oct, 2024 02:43 PM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Was genau ist mit manuell einbinden gemeint?

    Der Slider kann via JavaScript initialisiert werden, weitere Informationen dazu finden Sie im rsts_default.html5-Template: https://github.com/madeyourday/contao-rocksolid-slider/blob/4ef5f99...

    Die verfügbaren Optionen sind im JavaScript-Quellcode des Sliders dokumentiert: https://github.com/madeyourday/rocksolid-slider/blob/0746011d4b9620...

    Einstellungen für unterschiedliche Breiten sind nicht vorgesehen. Die Anzahl der Slides die angezeigt werden sollen lässt sich über die Mindest- und Maximalbreite der Slides responsive festlegen.

  2. 2 Posted by Elke on 14 Oct, 2024 09:52 AM

    Elke's Avatar

    Vielen Dank - hab tatsächlich nicht daran gedacht den JavaScript Code rauszusuchen - shame on me!
    Schade - responsive Einstellmöglichkeiten mit Breakpoints wären für mich in diesem Fall sehr hilfreich.

  3. Support Staff 3 Posted by RockSolid Theme... on 15 Oct, 2024 08:10 AM

    RockSolid Themes's Avatar

    Welche der Einstellungen möchten Sie anhand von Breakpoints verändern? Einige Optionen des Sliders lassen sich auch im Nachhinein noch via JavaScript anpassen und können dadurch auch von Media-Queries abhängig gemacht werden.

  4. 4 Posted by Elke on 15 Oct, 2024 08:20 AM

    Elke's Avatar

    Es geht um die Optionen "visibleArea" und "gapSize".
    Wie kann ich Optionen ändern ohne die Seite neu zu laden?

  5. Support Staff 5 Posted by RockSolid Theme... on 15 Oct, 2024 08:44 AM

    RockSolid Themes's Avatar

    Diese Optionen lassen sich z. B. mit folgendem JavaScript-Code anpassen:

    jQuery('#ID_DES_SLIDERS').data('rstSlider').options.visibleArea = 0.8;
    jQuery('#ID_DES_SLIDERS').data('rstSlider').options.gapSize = 10;
    jQuery('#ID_DES_SLIDERS').data('rstSlider').resize();
    

    Der Aufruf der Funktion resize() stellt sicher, dass die Änderungen an den Optionen direkt übernommen werden.

  6. 6 Posted by Elke on 15 Oct, 2024 08:55 AM

    Elke's Avatar

    Vielen herzlichen Dank - funktioniert wunderbar!

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac