Блог

Я хочу сделать слайдер, подобный следующему изображению, но он не скользит плавно. и у меня проблема с первым слайдом, он прыгает. Я попытался исправить это, следуя многим ответам здесь, но все равно это не исправлено. я буду очень благодарен, если кто-нибудь поможет мне это исправить. Вот скриншот

Вот сценарий:

 $('.comment-slider').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: true,
        asNavFor: '.client-slider'
    });
    $('.client-slider').slick({
        slidesToShow: 3,
        speed: 500,
        slidesToScroll: 1,
        asNavFor: '.comment-slider',
        centerMode: true,
        centerPadding : '20%',
        variableWidth: true,
        autoplay : true,
        arrows : false
    });
 

Вот CSS:

         .comment-slider {
            .single-comment {
                text-align: center;
                p {
                    font-size: 16px;
                    line-height: 26px;
                    color: $white;
                    margin-bottom: 10px;
                }
                .client {
                    h3 {
                        font-size: 25px;
                        line-height: 100%;
                        font-weight: 700;
                        color: $white;
                        margin-bottom: 10px;
                    }
                    h5 {
                        font-size: 16px;
                        line-height: 100%;
                        font-weight: 400;
                        color: $white;
                        margin-bottom: 0;
                    }
                }
            }
        }
        .client-slider {
            padding: 0 64px;
            .slick-track {
                height: 76px;
                transition: all 0.4s ease;
                .single-box {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    transition: all 0.4s ease;
                    .img {
                        width: 38px;
                        border: 4px solid $white;
                        border-radius: 50%;
                        overflow: hidden;
                        transition: all 0.4s ease;
                    }
                    amp;.slick-active {
                        .img {
                            width: 55px;
                        }
                    }
                    amp;.slick-center {
                        .img {
                            width: 76px;
                        }
                    }
                }
            }
        }