I have implemented the following code to create an infinite slider for my client's logo. The slider moves from right to left and I am using jQuery to add duplicate slides to ensure the loop continues seamlessly.
However, I am facing a particular issue where the code resets automatically after the slider reaches the fourth card. Can anyone provide insight on what might be causing this problem?
$(document).ready(function() {
// Clone cards to create infinite loop
$(".marqueme").clone().appendTo(".marquestarthere");
}); .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: 200px;
}
.marqueslide .marqueme {
flex: 0 0 auto;
margin-right: 20px;
border:1px solid #000
}
/* solution */
.marquestarthere {
animation: marquee 8s linear infinite; /* Set the animation here */
}
.marquestarthere:hover{
animation-play-state: paused;
}
@keyframes marquee {
0%,100% {
transform: translateX(0);
}
99.999% {
transform: translateX(-50%);
}
}<div class="marqueslide">
<ul class="testimonial-cards marquestarthere">
<li class="marqueme">Card 1</li>
<li class="marqueme">Card 2</li>
<li class="marqueme">Card 3</li>
<li class="marqueme">Card 4</li>
<li class="marqueme">Card 5</li>
<li class="marqueme">Card 6</li>
<li class="marqueme">Card 7</li>
<li class="marqueme">Card 8</li>
<li class="marqueme">Card 9</li>
<li class="marqueme">Card 10</li>
<!-- duplicate cards append here-->
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>