Produkt Slider nur 3 Artikel statt 4 in einer Reihe anzeigen?

Shopware 6 (German) Programmierung
, ,
1

Moin,

Ich arbeite grade an einem eigene Theme für meinen neuen Shop für Shopware 6. Ich habe auf der Startseite einen Artikel Slider. Weiss einer von euch, bzw. kann mir Weiterhelfen, das dort nur 3 Artikel gleichzeitig angezeigt werden, und er dann immer einen weitergeht? Standtartmäßig, bzw. je nach bildschirmgröße schein es ja 4 zu sein, ich möchte jedoch max. 3 gleichzeitig. Habe schon viel versucht, aber rein mittels CSS scheint das ja nicht zu gehen. Irgendwas muss an der js verändert werden, nähme ich an. Soweit ich das verstanden habe wird der tiny slider (https://github.com/ganlanyuan/tiny-slider#tiny-slider-2) ja dort verwendet. Allerdings weiss ich jetzt nicht wie ich denn in SHopware jetzt so anpasse. Brauche dringend hilfe! Vielen Dank im voraus.

2

http://ganlanyuan.github.io/tiny-slider/demo/#responsive_wrapper

Anstelle der Pixel Angabe musst du die Bootstrap Breakpoints verwenden. xs sm md lg xl

Das json kannst du im twig Template anpassen.

3

Könntest du mir dafür vielleicht mal ein Beispiel zeigen? Weiss grade nicht so recht wie ich das Umsetzen soll.

4

Weil ich gerade vor dem selben Problem stehe.

Ich habe in meinem Twig Template die cms-elements-product-slider.html.twig extended und die Slider Optionen anpasst. Wie bereits @StefanPoensgen erwähnt hat kann man die Bootstrap Breakpoints in den Slider Options verwenden. Mehr dazu hier: https://github.com/ganlanyuan/tiny-slider#responsive-options

Hier das Beispiel:

{% set productSliderOptions = {
    slider: {
        productboxMinWidth: false,
        gutter: 20,
        autoplayButtonOutput: false,
        nav: false,
        mouseDrag: false,
        controls: sliderConfig.navigation.value ? true : false,
        autoplay: sliderConfig.rotate.value ? true : false,
        responsive: {
            xs: {
                items: 1
            },
            sm: {
                items: 2
            },
            md: {
                items: 3
            },
            lg: {
                items: 4
            },
            xl: {
                items: 5
            }
        }
    }
} %}

Leider übernimmt er meine definierten Responsive Options überhaupt nicht.