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”.
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
4 odpowiedzi
Możesz użyć selektora +:
.slick-active + .slick-active + .slick-active {
//your property
}
Możesz spróbować podać osobny identyfikator slajdu, jeśli nie jest on tworzony dynamicznie. A następnie zastosuj wymagany CSS.
Musimy skupić się konkretnie na ostatnim dziecku.
.slick-active:nth-child(3) {
color: red;
}