Question 374338 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Slide client logo from right to left infinite loop

I am using the code below for my client’s logo. This code creates an infinite slider that slides from right to left.

I am also using jQuery to append duplicate slides for the infinite loop.

However, I’m encountering an issue: the code resets automatically after the slide reaches the fourth card.

would you help me out what is the issue here?

 $(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>
Tags:

2

Answers


  1. 0 
            $(document).ready(function() {
            // Clone list items to create infinite loop
            $(".marqueslide .marqueme").slice(0, 4).clone().appendTo(".marquestarthere");
        });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<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>
        <!-- Duplicate list items will be appended here -->
    </ul>
    </div>

    The issue you’re encountering seems to be related to the way you’re appending the duplicate slides. It looks like you’re cloning the entire .marqueme element and appending it to .marquestarthere, which is causing duplication of the entire list. Instead, you should only clone the individual list items and append them accordingly.

    Here’s the corrected jQuery code to clone and append the list items properly:

    $(document).ready(function() {
    // Clone list items to create infinite loop
    $(".marqueslide .marqueme").slice(0, 4).clone().appendTo(".marquestarthere");
});

    And here’s the corrected HTML structure:

    <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>
    <!-- Duplicate list items will be appended here -->
</ul>

    This code will clone the first four list items (cards) and append them to the end of the list, creating the infinite loop effect you desire.

    Login or Signup to reply.
  2. 0 
     $(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 {
  max-width: 500px;
  height: auto;
   aspect-ratio: 1/1;
   
}

.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>

    it’s an issue with the width of the cards, if the card container is sliding 50% it isn’t able to get to last card by time the animation ends, removing the width: 100% from li seems to work, you can size it as required but might need to change the translateX value appropriately.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search