Używam wtyczki Slick JS. Domyślnie do wszystkich slajdów jest dodawana klasa „slick-slide”. Zauważyłem, że do slajdów, które są obecnie widoczne, dodano kolejną klasę o nazwie „slick-active”.

Powiedzmy, że chcę wyświetlić 3 slajdy (slidesToShow: 3). Zatem wszystkie slajdy w widoku będą miały zawsze dwie klasy, a mianowicie „slick-slide” i „slick-active”.

A quick inspect element of slick slides

Próbuję wskazać ostatni slajd, który ma klasę „slick-active” przy użyciu CSS. Próbowałem wszystkich możliwych kombinacji selektorów, ale jak dotąd bez powodzenia.

Najpierw daję odpowiedni margines wszystkim elementom z klasą „slick-active”. Następnie chciałbym wycelować po prostu używając css do ostatniego elementu z klasą „slick active” i nadać margines na prawo od 0.

.slick-active {
    margin-right: 15px;
    background: blueviolet;
}

.slick-slide.slick-active:last-of-type {
    margin-right: 0;
    background: orangered;
}

Próbowałem nawet użyć selektorów nth-last-of-type (1) i nth-last-child () . Czy ktoś może mi zasugerować właściwy selektor CSS, aby skierować ostatni slajd z klasą slick-active. Nie chcę kierować slajdów za pomocą javascript lub jquery. Docenione zostanie tylko czyste rozwiązanie CSS. Dziękuję Ci

1
Vik 20 listopad 2019, 07:54

4 odpowiedzi

Możesz użyć selektora +:

.slick-active + .slick-active + .slick-active {
  //your property
}
0
Jason Aller 20 listopad 2019, 10:53

Możesz spróbować podać osobny identyfikator slajdu, jeśli nie jest on tworzony dynamicznie. A następnie zastosuj wymagany CSS.

0
Vatsal Trivedi 20 listopad 2019, 08:21

Musimy skupić się konkretnie na ostatnim dziecku.

.slick-active:nth-child(3) {
  color: red;
}
0
Navdeep Singh 20 listopad 2019, 08:24
Dziękuję za odpowiedź, ale nie chcę kierować się tylko na trzeci slajd. Zawsze chciałbym celować w ostatni slajd.
 – 
Vik
20 listopad 2019, 16:45

Możesz użyć

.slick-active:nth-child(3n){}

Zobacz te skrzypce

0
Shuaib Khan 20 listopad 2019, 09:01