Как сделать так, чтобы прямоугольники в навигации Slick slider менялись плавно и не дергались?

Question

[Norum]

Как сделать так, чтобы прямоугольники в навигации плавно сменяли друг друга, а именно: когда происходит клик с НЕ активного слайда на АКТИВНЫЙ, то активный плавно уменьшается в ширине до размера неактивного, а неактивный одновременно плавно увеличивается в ширине до активного. Так же не понятно, почему они дергаются при смене

Сам сайт ilyin1ib.beget.tech

Весь код https://jsfiddle.net/zc78gbae/

<div class="gal">
                    <div><img src="img/main-slider-1.jpg" alt=""></div>
                    <div><img src="img/main-slider-1.jpg" alt=""></div>
                    <div><img src="img/main-slider-1.jpg" alt=""></div>
                    <div><img src="img/main-slider-1.jpg" alt=""></div>
</div>

.slick-dots {
  bottom: 100px !important;
}
.slick-dots li button {
  height: 4px !important;
  padding: 4px !important;
  width: 20px !important;
  background: #fff!important;
  opacity: 0.5;
  transition: 0.3s;
}
.slick-dots li button:before {
  display: none;
}
li.slick-active {
  width: 40px !important;
  height: 100% !important;
  background: #ff5722 !important;
  z-index: 99 !important;
  transition: 0.3s;
}
li.slick-active button {
  background-color: #ff5722 !important;
}

$(document).ready(function() {
    $('.gal').slick({
        dots: true,
        arrows: false,
        infinite: true,
        speed: 600,
        slidesToShow: 1,
        centerMode: true,
        variableWidth: true,
        adaptiveHeight: true,

    });


});

Answer 1

[DivineDraft]

У вас указано свойство transition только для активного блока. Уберите его с "li.slick-active" и добавьте к общему ".slick-dots li" свойство "transition: all 3s ease;" - 2 секунды, чтобы вы наглядно увидели плавность, настройте по усмотрению (так же не забудьте обновить значение и в .slick-dots li button).

Comments

[Norum]

спасибо!!