Zeigen Sie die Hälfte der nächsten Folie ohne Center-Modus im Slick Slider

Ich möchte einen Schieberegler haben, der 3,5 Folien gleichzeitig anzeigt, wobei die Folie ganz rechts diejenige ist, die nur zur Hälfte angezeigt wird. Ich habe so etwas erfolgreich mit centerMode und centerPadding mit Slick-Slider gesehen, aber ich möchte nicht, dass die Folien zentriert werden. Mit anderen Worten, ich möchte, dass die Folie ganz links mit der Seite des Fensters bündig ist und vollständig sichtbar ist, aber die Folie ganz rechts halb im Fenster und halb daneben liegt. Ist das bei Slick möglich? Ich habe Leute gesehen, die slidesToShow: 3.5 verwendet haben, aber dadurch verschwindet die ganz linke Folie halb vom Bildschirm und ich brauche sie auf der rechten Seite.

“slidesToShow: 3.5 option” muss nicht hinzugefügt werden

Ruf einfach glatt an:-

$('.Your-container').slick({
    arrows: false,
});

und folgendes CSS hinzufügen:

.slick-list{padding:0 20% 0 0 !important;}

Entweder Sie können rechts eine feste Auffüllung oder einen Prozentsatz angeben.

Sie können so etwas tun slidesToShow: 3.5 und mache infinite: false. Die Folie ganz rechts zeigt die Hälfte.

Sie können dies auch in Slick tun, indem Sie diese beiden Parameter in der Slick-Initialisierung hinzufügen:

centerMode: true,
centerPadding: '20%',

Dies ist das Äquivalent zu

.slick-list{padding:0 20% 0 0;}

Bitte achten Sie auf die Verwendung slidesToShow mit Nachkommastellen.

Entsprechend Offizielle Dokumentation slidesToShow ist vom Typ int und nicht float. Die Verwendung als Float verursacht unvorhersehbare Ausnahmen breakpoint Ereignis (wenn Sie eine benutzerdefinierte Haltepunktoption angegeben haben).

Weitere Informationen zu diesem Problem finden Sie in den offiziellen Slick-GitHub-Threads hier, hier.

Vielleicht müssen Sie wichtige in CSS hinzufügen.

Hier ist mein JS-Code:

$(this).slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    adaptiveHeight: true,
    infinite: true,
    arrows: true,
    dots: false,
    centerMode: true,
})

Hier ist CSS-Code:

.slick-list {
    padding:0 20% 0 0 !important;
}

Mein Anwendungsfall ist etwas anders, da ich Teile sowohl der vorherigen als auch der nächsten Folie zeigen möchte. ebenso gut wie die Pfeile zwischen der aktuellen Folie und diesen Folien.

Was bisher für mich funktioniert, ist das Hinzufügen dieser Stile:

.slick-list {
  /* Show slides that would otherwise be hidden off-screen */
  overflow: visible;
}

.slick-slide:not(.slick-current) {
  /* Make slides other than the current one translucent */
  opacity: 0.4;
}

Es ist ein Work-in-Progress, aber dies war die einzige Möglichkeit, um sowohl die vorherige als auch die nächste Folie anzuzeigen.

Vielleicht ist es erwähnenswert, dass die Einstellung lazyLoad: "ondemand" ist mit diesem Ansatz nicht kompatibel, da der Inhalt der Vorschaufolien erst geladen wird, wenn sie sich in der Mitte befinden.