Нужен очень резко дать стили предыдущую и следующую элементу слайдера slick

129

11 мая 2019, 00:50

Хочу получить эффект закруглённости поэтому нужен пока слайдер крутиться дать уже стили. но для этого нужен быстро узнать предыдущую и следующую очередь слайдера вот у меня есть код но глючит он и медленно дает классы

    $('.sliderList2Text').on('init', function(){
    $(".sliderList2Text .slick-active").prev().removeClass('nextdiv').addClass('prevdiv');
    $(".sliderList2Text .slick-active").next().removeClass('prevdiv').addClass('nextdiv');
});
$('.sliderList2Text').slick({
  autoPlay:false,
    speed:800,
    dots:false,
    arrows: true,
    vertical: true,
    prevArrow: '',
    nextArrow: '',
     slidesToShow: 3,
    slidesToScroll: 1,
    centerMode: true,
    centerPadding: '-93%',
    focusOnSelect: true,
}).on('afterChange',function(){
      $(".sliderList2Text .slick-active").prev().removeClass('nextdiv').addClass('prevdiv');
    $(".sliderList2Text .slick-active").next().removeClass('prevdiv').addClass('nextdiv');
});

и даю стили в css

.nextdiv{
    transition: 0.33s !important;
    transform: perspective(900px) rotate3d(180, -45, 0, -12deg);
}
.sliderList2Text .slick-current{
    transform: perspective(900px) rotate3d(200, -45, 4, 3deg) !important;
    transition: 0.33s;
}
.prevdiv{
    transition: 0.33s;
    transform: perspective(900px) rotate3d(-180, -133, 0, -16deg) !important;
}

это все делаю что-бы получать вот такой эффект

Answer 1

Можно сделать через centerMode

.slick-slide.slick-active {стили первого слайда}
.slick-slide.slick-active.slick-center {стили центрального слайда}
.slick-slide.slick-active ~ .slick-active {стили третьего слайда}