从右向左滑动客户标志无限循环

Question

我使用下面的代码作为我客户的徽标。此代码创建一个从右向左滑动的无限滑块。

我还使用 jQuery 为无限循环附加重复的幻灯片。

但是，我遇到了一个问题：幻灯片到达第四张卡片后，代码会自动重置。

您能帮我解决这里的问题吗？

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

Answer 1

您遇到的问题似乎与您附加重复幻灯片的方式有关。看起来您正在克隆整个 .marqueme 元素并将其附加到 .marquestarthere，这会导致整个列表重复。相反，您应该只克隆各个列表项并相应地附加它们。

这是正确克隆和附加列表项的更正后的 jQuery 代码：

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

这是更正后的 HTML 结构：

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

此代码将克隆前四个列表项（卡片）并将它们附加到列表末尾，创建您想要的无限循环效果。