Бесконечный слайдер немного подпрыгивает ⇐ CSS

[Anonymous]

Я создаю бесконечный слайдер справа налево. Когда пользователь наводит на него курсор, он останавливается. При наведении курсора он начнется снова.
Работает, но не гладко. это немного прыжков. Не могли бы вы помочь мне с этим?
Найдите код ниже

Код: Выделить всё

//marque slide
var animationInterval;
$(document).ready(function() {
$('.marqueslide').mouseenter(function() {
stopSliderAnimation();
console.log("mouse entered");
}).mouseleave(function() {
startSliderAnimation();
console.log("mouse out");
});

startSliderAnimation(); // Start animation initially
});

function startSliderAnimation() {
animationInterval = setInterval(function() {
$('.marqueslide .row, .marqueslide .marquestarthere').animate({
marginLeft: '-=371px' // Adjust value according to the width of the cards and margin
}, 1000, 'linear', function() {
$(this).css('marginLeft', '0').find('.marqueme:last').after($(this).find('.marqueme:first'));
});
}, 1000); // Adjust the interval as needed
}

function stopSliderAnimation() {
clearInterval(animationInterval);
}

Код: Выделить всё

.testimonial-cards {
list-style: none;
display: flex;
gap: 56px 31px;
margin: 0 auto;
width: max-content;
flex-wrap: nowrap;
}

.testimonial-cards li {
width: 100%;
max-width: 500px;
min-height: 400px;
}

.marqueslide .marqueme {
flex: 0 0 auto;
margin-right: 20px;
}

.testimonial-cards .card-item {
display: flex;
flex-direction: column;
justify-content: space-between;
}

.testimonial-cards .card-item {
height: 100%;
background: #FFFFFF;
border-radius: 12px;
padding: 24px;
border: 1px solid #000;
}

Код: Выделить всё

[list]

[*]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus turpis, imperdiet ac dui at, elementum viverra metus. Vestibulum at interdum neque, sodales dapibus massa. Phasellus non faucibus nibh. Aliquam in varius mauris. Proin sodales
nulla quam, eget pellentesque lorem imperdiet quis. Sed placerat nisi lectus, ut tempus ante euismod eget. Phasellus rhoncus, lacus et varius dapibus, purus enim cursus tortor, et mattis velit lectus nec erat. Duis ultrices posuere eros. Praesent
ut risus eros. Proin at lacus feugiat mauris ultrices feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sapien ac mi lacinia elementum. Nunc posuere odio condimentum mi fermentum, ac dapibus diam pharetra. Phasellus
sed justo rutrum, bibendum ante porttitor, tempor orci. Morbi porttitor mi sed mi ullamcorper, sit amet ultrices magna volutpat.

[*]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus turpis, imperdiet ac dui at, elementum viverra metus. Vestibulum at interdum neque, sodales dapibus massa. Phasellus non faucibus nibh. Aliquam in varius mauris. Proin sodales
nulla quam, eget pellentesque lorem imperdiet quis. Sed placerat nisi lectus, ut tempus ante euismod eget. Phasellus rhoncus, lacus et varius dapibus, purus enim cursus tortor, et mattis velit lectus nec erat. Duis ultrices posuere eros. Praesent
ut risus eros. Proin at lacus feugiat mauris ultrices feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sapien ac mi lacinia elementum. Nunc posuere odio condimentum mi fermentum, ac dapibus diam pharetra. Phasellus
sed justo rutrum, bibendum ante porttitor, tempor orci. Morbi porttitor mi sed mi ullamcorper, sit amet ultrices magna volutpat.

[*]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus turpis, imperdiet ac dui at, elementum viverra metus. Vestibulum at interdum neque, sodales dapibus massa. Phasellus non faucibus nibh. Aliquam in varius mauris. Proin sodales
nulla quam, eget pellentesque lorem imperdiet quis. Sed placerat nisi lectus, ut tempus ante euismod eget.  Phasellus rhoncus, lacus et varius dapibus, purus enim cursus tortor, et mattis velit lectus nec erat. Duis ultrices posuere eros. Praesent
ut risus eros. Proin at lacus feugiat mauris ultrices feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sapien ac mi lacinia elementum. Nunc posuere odio condimentum mi fermentum, ac dapibus diam pharetra. Phasellus
sed justo rutrum, bibendum ante porttitor, tempor orci. Morbi porttitor mi sed mi ullamcorper, sit amet ultrices magna volutpat.

[*]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus turpis, imperdiet ac dui at, elementum viverra metus. Vestibulum at interdum neque, sodales dapibus massa. Phasellus non faucibus nibh. Aliquam in varius mauris. Proin sodales
nulla quam, eget pellentesque lorem imperdiet quis. Sed placerat nisi lectus, ut tempus ante euismod eget. Phasellus rhoncus, lacus et varius dapibus, purus enim cursus tortor, et mattis velit lectus nec erat. Duis ultrices posuere eros. Praesent
ut risus eros. Proin at lacus feugiat mauris ultrices feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sapien ac mi lacinia elementum. Nunc posuere odio condimentum mi fermentum, ac dapibus diam pharetra. Phasellus
sed justo rutrum, bibendum ante porttitor, tempor orci. Morbi porttitor mi sed mi ullamcorper, sit amet ultrices magna volutpat.

[*]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus turpis, imperdiet ac dui at, elementum viverra metus. Vestibulum at interdum neque, sodales dapibus massa. Phasellus non faucibus nibh. Aliquam in varius mauris. Proin sodales
nulla quam, eget pellentesque lorem imperdiet quis. Sed placerat nisi lectus, ut tempus ante euismod eget. Phasellus rhoncus, lacus et varius dapibus, purus enim cursus tortor, et mattis velit lectus nec erat. Duis ultrices posuere eros. Praesent
ut risus eros. Proin at lacus feugiat mauris ultrices feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sapien ac mi lacinia elementum. Nunc posuere odio condimentum mi fermentum, ac dapibus diam pharetra. Phasellus
sed justo rutrum, bibendum ante porttitor, tempor orci. Morbi porttitor mi sed mi ullamcorper, sit amet ultrices magna volutpat.

[*]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus turpis, imperdiet ac dui at, elementum viverra metus. Vestibulum at interdum neque, sodales dapibus massa. Phasellus non faucibus nibh. Aliquam in varius mauris. Proin sodales
nulla quam, eget pellentesque lorem imperdiet quis. Sed placerat nisi lectus, ut tempus ante euismod eget. Phasellus rhoncus, lacus et varius dapibus, purus enim cursus tortor, et mattis velit lectus nec erat. Duis ultrices posuere eros. Praesent
ut risus eros. Proin at lacus feugiat mauris ultrices feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sapien ac mi lacinia elementum. Nunc posuere odio condimentum mi fermentum, ac dapibus diam pharetra. Phasellus
sed justo rutrum, bibendum ante porttitor, tempor orci. Morbi porttitor mi sed mi ullamcorper, sit amet ultrices magna volutpat.

[/list]

Подробнее здесь: https://stackoverflow.com/questions/782 ... it-jumping