从右向左无限循环Logo滑块重置问题排查求助

问题描述 #

为客户实现从右向左滑动的无限Logo轮播，通过jQuery克隆轮播项实现循环，但滑块滑动到第4个卡片后自动重置，无法正常无限滚动。

问题原因 #

1. li元素宽度设置错误：.testimonial-cards li设置了width:100%，在flex容器中会让每个li的宽度被拉伸为整个ul的总宽度，直接破坏轮播布局，导致动画提前触发重置。
2. 父容器未隐藏溢出内容：.marqueslide缺少overflow:hidden属性，无法隐藏超出视口的轮播项，克隆的元素直接暴露在页面上，无法形成无缝循环的视觉效果。
3. 间距重复设置：.testimonial-cards的gap和.marqueslide .marqueme的margin-right同时设置，导致轮播项间距混乱，进一步影响动画的滑动逻辑。

修复方案 #

1. 移除li的width:100%属性，保留max-width:500px，让轮播项以自身合适宽度显示。
2. 给.marqueslide添加overflow:hidden和width:100%，隐藏超出视口的内容。
3. 统一轮播项间距，移除.testimonial-cards的gap，仅保留li的margin-right（或反之，保持一致即可）。

修复后的完整代码 #

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

CSS #

.marqueslide {
    width: 100%;
    overflow: hidden; /* 隐藏超出视口的内容 */
}

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

.testimonial-cards li {
    max-width: 500px;
    min-height: 200px;
}

.marqueslide .marqueme {
    flex: 0 0 auto;
    margin-right: 31px; /* 统一间距，移除gap避免重复 */
    border:1px solid #000
}

.marquestarthere {
    animation: marquee 8s linear infinite;
}

.marquestarthere:hover{
    animation-play-state: paused;
}

@keyframes marquee {
    0%,100% {
        transform: translateX(0);
    }
    99.999% {
        transform: translateX(-50%);
    }
}

JavaScript #

$(document).ready(function() {
    // Clone cards to create infinite loop
    $(".marqueme").clone().appendTo(".marquestarthere");
});

内容的提问来源于stack exchange，提问作者Naren Verma