创建带有可点击指示器的无限滚动轮播

Question

我正在尝试创建一个水平滚动的div，类似于轮播，包含多个可以从左向右滚动的卡片。滚动应该是无限的，这意味着一旦到达最后一张卡，滚动应该从第一张卡重新开始。 我已经成功实现了这一点，但我对应该出现在 div 下方的指标有疑问。我想要有对应于各种卡片的点，并且当单击时，它们应该允许在卡片之间导航，重置 div 的滚动。 为了使滚动无限，我在到达末尾时复制了卡片，这部分效果很好。当我尝试使用克隆元素手动计算滚动时，问题出现了，因为点保留在原始数字中（不包括克隆元素）。我该如何解决这个问题？你有什么例子吗？我在网上好像找不到任何东西。

Answer 1

您始终可以使用Glide.js之类的东西来完成此设计目标。

如果您需要帮助更新表示轮播项目数量的状态，我们将需要查看您的一些代码来重现问题，并能够了解您的状态未更新的原因。

这是一个使用 Glide.js 实现轮播的示例，为您处理所有循环逻辑。

new Glide('.glide', {
    type: 'carousel',
    perView: 3,
    animationDuration: 500,
    loop: true
}).mount();

body {
  margin: 0;
}
.glide__slide {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    font-size: 2rem;
    background: lightgrey;
}
.glide__arrows button {
  transform: translateY(100%);
  background: lightgrey;
}
.glide__bullets {
  padding: 10px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/css/glide.core.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/css/glide.theme.min.css">
<div class="glide">
    <div class="glide__track" data-glide-el="track">
        <ul class="glide__slides">
            <li class="glide__slide a">1</li>
            <li class="glide__slide b">2</li>
            <li class="glide__slide c">3</li>
            <li class="glide__slide d">4</li>
            <li class="glide__slide e">5</li>
        </ul>
    </div>

    <!-- Navigation Arrows -->
    <div class="glide__arrows" data-glide-el="controls">
        <button class="glide__arrow glide__arrow--left" data-glide-dir="<">Prev</button>
        <button class="glide__arrow glide__arrow--right" data-glide-dir=">">Next</button>
    </div>

    <!-- Dots Navigation -->
    <div class="glide__bullets" data-glide-el="controls[nav]">
        <button class="glide__bullet" data-glide-dir="=0"></button>
        <button class="glide__bullet" data-glide-dir="=1"></button>
        <button class="glide__bullet" data-glide-dir="=2"></button>
        <button class="glide__bullet" data-glide-dir="=3"></button>
        <button class="glide__bullet" data-glide-dir="=4"></button>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/glide.min.js"></script>