Neu Responsive Slider auf der Statseite

[cdx]

Hallo, gibt es eine Möglichkeit die Produkte in Slider responsive zumachen???

Zum Beispiel 6 Produkte in eine Zeile werden zu drei Produkten in einer Zeile bei Bildschirmbreite 500px
Restliche Produkte dürfen unten positioniert werden oder werden ganz ausgeblendet.

 

[css-umsetzung]

Macht es doch bereits?

 

[cdx]

Warum werden dann alle meine Slider so angezeigt???

Normale Ansicht



Responsive Ansicht

Was ist schiefgelaufen???

 

[css-umsetzung]

Ohne url schwierig aber ich würde mal sagen das da jemand an den styles rumgefummelt hat.
Oder du hast vor dem Doctype eine Ausgabe die da nicht hingehört, dann könnten solche Effekte auch auftreten....aber nicht nur bei den Slidern.

 

[cdx]

Wenn ich das Theme ändere bleibt genau so. Ich bearbeite nur meine mytheme.css Datei.
Vor DOCTYPE habe ich keine Ausgabe. CSS wird nur aus bootstrap.css übernommen.

Wass soll mit den Produkten passieren wenn ich die Breite verändere? Verschwinden diese oder werden die die zuviel sind einfach ausgeblendet????

 

[css-umsetzung]

wenn dein Shop geheim ist und ihn niemand kennt wird da keiner kaufen können...
Und niemand wird schauen können warum es bei dir so ist, ich kenne das Problem nicht daher muss es ja etwas sein das vermutlich nur bei dir gelöst werden kann.

 

[cdx]

Hier Link (Top Angebote) https://gametastix.de/einkaufen/

 

[css-umsetzung]

Ahh nun weiss ich was dein eigentliches Problem ist (die Beschreibung)
ich hatte das eine Bild nicht angeklickt

Der slick-slider kann Breakpoints, damit sich die Anzahl der Produkte reduzieren kann wenn es kleiner wird, die müssen aber definiert werden.
Vermutlich ist dort nichts angegeben ich möchte aber meinen ich hätte das irgendwo gesehen.

 

[cdx]

Super, VIELEN DANK!!!!

 

[css-umsetzung]

ist im Evo.js auch so festgehalten also eigentlich alles richtig:

        generateSlickSlider: function() {
            /*
             * box product slider
             */

            $('.evo-box-slider:not(.slick-initialized)').slick({
                //dots: true,
                arrows: true,
                slidesToShow: 1
            });

            /*
             * responsive slider (content)
             */
            $('.evo-slider:not(.slick-initialized)').slick({
                //dots: true,
                arrows: true,
                slidesToShow: 3,
                responsive: [
                    {
                        breakpoint: 480, // xs
                        settings: {
                            slidesToShow: 1
                        }
                    },
                    {
                        breakpoint: 768, // sm
                        settings: {
                            slidesToShow: 2
                        }
                    },
                    {
                        breakpoint: 992, // md
                        settings: {
                            slidesToShow: 3
                        }
                    }
                ]
            });
        },