Installation: Slider Pro mit Bootstrap 4

Ronnie's Avatar

Ronnie

20 Feb, 2021 01:40 PM

Produkt: Slider Pro Contao
Contao-Version: 4.4.55

Hallo,

habe vor kurzem bzw. ein Kunde den Rock Slider Pro gekauft.

Möchte den Slider als Full-Width einbinden und benutze dabei Bootstrap 4.
Bin wie in der Dokumentation vorgegangen, der Slider funktioniert, geht jedoch nicht über die gesamte Breite, sondern begrenzt sich auf den Inhaltsbereich.

Haben Sie hierfür eine passende Dokumentation für Bootstrap 4?

  1. Support Staff 1 Posted by RockSolid Theme... on 22 Feb, 2021 10:21 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Wir konnten das Problem in unserem Test nicht reproduzieren.

    Damit wir Ihnen zielgerichteter weiterhelfen können, schicken Sie uns bitte einen Link zur betroffenen Seite.

  2. 2 Posted by Ronnie on 24 Feb, 2021 02:13 AM

    Ronnie's Avatar

    Link:
    https://www.2020.steinmetz-jakob.de

    Modul ist eingebunden auf der Startseite.

    Beim Umstellen des Templates auf Standard funktioniert der Slider auf Full-Width, jedoch nicht bei der Auswahl des Bootstrap-Templates.

  3. Support Staff 3 Posted by RockSolid Theme... on 24 Feb, 2021 09:51 AM

    RockSolid Themes's Avatar

    Auf Ihrer Website befindet sich der gesamte Inhalt in einem <div id="container" class="container"> und über die CSS-Klasse container wird in Bootstrap die Breite festgelegt: https://getbootstrap.com/docs/5.0/layout/containers/

    Um auf ein Fullwidth-Layout zu wechseln müssten Sie also vermutlich die Bootstrap-Klasse container-fluid verwenden oder den Slider nicht in der Hauptspalte platzieren.

  4. 4 Posted by Ronnie on 10 Mar, 2021 03:42 PM

    Ronnie's Avatar

    Vielen Dank für die Rückmeldung.

    Ich habe "container-fluid" im Template eingestellt. Der Slider funktioniert jetzt über die volle Breite, jedoch ignoriert er die Höhe im CSS, habe bereits verschiedene Einstellungen versucht.

    Ich möchte den Slider mit einer responsive Höhe einbauen, ähnlich wie ich es mit einem Einzelbild auf www.jakob-urnenanlagen.de getan habe. Der Slider soll nicht die komplette Höhe des Bildes anzeigen, sondern oben und unten etwas abschneiden und nur einen Bereich in der Mitte anzeigen (als Beispiel hier nur die xl-Version, Breite über 1.200px).

    Habe hierfür die selben CSS Einstellungen wie unter einem anderen Beitrag versucht.
    https://help.rocksolidthemes.com/discussions/contao/10573-verwendung-responsive-hhe

    Link:
    www.2020.steinmetz-jakob.de

    CSS:
    .rockslider {
    width: 100%;
    height: 20%;
    }
    @media (min-width: 1200px){
    .rockslider {
    height: 48%;
      }
    }

  5. Support Staff 5 Posted by RockSolid Theme... on 11 Mar, 2021 11:51 AM

    RockSolid Themes's Avatar

    Für eine Höhe relativ zur Höhe des Browserfensters können Sie die vh CSS-Einheit verwenden:

    .rockslider {
        width: 100%;
        height: 20vh;
    }
    @media (min-width: 1200px){
        .rockslider {   
            height: 48vh;
        }
    }
    

    Damit das Bild beschnitten wird, können Sie in den Moduleinstellungen des Sliders den Skalierungsmodus auf „Beschneiden“ einstellen.

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