tag:help.rocksolidthemes.com,2012-07-23:/discussions/contao/64748-installation-slider-pro-mit-bootstrap-4RockSolid Themes: Discussion 2021-07-13T07:27:38Ztag:help.rocksolidthemes.com,2012-07-23:Comment/490464732021-02-20T13:40:19Z2021-02-20T13:40:19ZInstallation: Slider Pro mit Bootstrap 4<div><p>Produkt: Slider Pro Contao<br>
Contao-Version: 4.4.55</p>
<p>Hallo,</p>
<p>habe vor kurzem bzw. ein Kunde den Rock Slider Pro gekauft.</p>
<p>Möchte den Slider als Full-Width einbinden und benutze dabei Bootstrap 4.<br>
Bin wie in der Dokumentation vorgegangen, der Slider funktioniert, geht jedoch nicht über die gesamte Breite, sondern begrenzt sich auf den Inhaltsbereich.</p>
<p>Haben Sie hierfür eine passende Dokumentation für Bootstrap 4?</p></div>Ronnietag:help.rocksolidthemes.com,2012-07-23:Comment/490464732021-02-22T10:21:12Z2021-02-22T10:21:12ZInstallation: Slider Pro mit Bootstrap 4<div><p>Vielen Dank für Ihre Frage.</p>
<p>Wir konnten das Problem in unserem Test nicht reproduzieren.</p>
<p>Damit wir Ihnen zielgerichteter weiterhelfen können, schicken Sie uns bitte einen Link zur betroffenen Seite.</p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/490464732021-02-24T02:13:42Z2021-07-13T07:25:17ZInstallation: Slider Pro mit Bootstrap 4<div><p>Link: [entfernt]</p>
<p>Modul ist eingebunden auf der Startseite.</p>
<p>Beim Umstellen des Templates auf Standard funktioniert der Slider auf Full-Width, jedoch nicht bei der Auswahl des Bootstrap-Templates.</p></div>Ronnietag:help.rocksolidthemes.com,2012-07-23:Comment/490464732021-02-24T09:51:10Z2021-02-24T09:51:10ZInstallation: Slider Pro mit Bootstrap 4<div><p>Auf Ihrer Website befindet sich der gesamte Inhalt in einem <code><div id="container" class="container"></code> und über die CSS-Klasse <code>container</code> wird in Bootstrap die Breite festgelegt: <a href="https://getbootstrap.com/docs/5.0/layout/containers/">https://getbootstrap.com/docs/5.0/layout/containers/</a></p>
<p>Um auf ein Fullwidth-Layout zu wechseln müssten Sie also vermutlich die Bootstrap-Klasse <code>container-fluid</code> verwenden oder den Slider nicht in der Hauptspalte platzieren.</p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/490464732021-03-10T15:42:08Z2021-07-13T07:26:39ZInstallation: Slider Pro mit Bootstrap 4<div><p>Vielen Dank für die Rückmeldung.</p>
<p>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.</p>
<p>Ich möchte den Slider mit einer responsive Höhe einbauen, ähnlich wie ich es mit einem Einzelbild auf [Link entfernt] 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).</p>
<p>Habe hierfür die selben CSS Einstellungen wie unter einem anderen Beitrag versucht.<br>
<a href="https://help.rocksolidthemes.com/discussions/contao/10573-verwendung-responsive-hhe">https://help.rocksolidthemes.com/discussions/contao/10573-verwendun...</a></p>
<p>CSS:<br>
.rockslider { width: 100%; height: 20%; } @media (min-width: 1200px){ .rockslider {<br>
height: 48%; } }</p></div>Ronnietag:help.rocksolidthemes.com,2012-07-23:Comment/490464732021-03-11T11:51:34Z2021-03-11T11:51:34ZInstallation: Slider Pro mit Bootstrap 4<div><p>Für eine Höhe relativ zur Höhe des Browserfensters können Sie die <code>vh</code> CSS-Einheit verwenden:</p>
<pre>
<code>.rockslider {
width: 100%;
height: 20vh;
}
@media (min-width: 1200px){
.rockslider {
height: 48vh;
}
}</code>
</pre>
<p>Damit das Bild beschnitten wird, können Sie in den Moduleinstellungen des Sliders den Skalierungsmodus auf „Beschneiden“ einstellen.</p></div>RockSolid Themes