I am creating an infinite marquee slider from right to left. When the user hovers over it, it will stop. Upon hovering out, it will start again.
It's working but not smoothly. it's a little bit of jumping. Would you help me out with this?
Please find the below code
//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;
}<div class="marqueslide">
<ul class="testimonial-cards marquestarthere">
<li class="marqueme">
<div class="card-item">
<p class="comment">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. </p>
</div>
</li>
<li class="marqueme">
<div class="card-item">
<p class="comment">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. </p>
</div>
</li>
<li class="marqueme">
<div class="card-item">
<p class="comment">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. </p>
</div>
</li>
<li class="marqueme">
<div class="card-item">
<p class="comment">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. </p>
</div>
</li>
<li class="marqueme">
<div class="card-item">
<p class="comment">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. </p>
</div>
</li>
<li class="marqueme">
<div class="card-item">
<p class="comment">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. </p>
</div>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
What you are doing is counterproductive. Because of
margin-leftanimation andsetInterval(), and because of rearrange the html elements.All this can be achieved with just css: the easiest way is to duplicate
li.marquemeand apply cssanimationwithanimation-play-state: paused;to:hover.A simple example based on your code: