如何根据视野中幻灯片的数量动态调整轮播圆点？

javascript

2024-03-23 19:13:27

动态调整轮播圆点偏移量以适应视野中幻灯片的数量

作为程序员和技术作家，我经常面临创建交互式和响应式应用程序界面。其中一个常见的挑战是如何根据用户界面中可见的元素动态调整用户界面元素。

问题：根据视野中幻灯片的数量更新轮播圆点

我最近为一个需要根据视图中显示的幻灯片数量动态调整轮播圆点的应用程序构建了一个自定义图库幻灯片。为了实现这一点，我研究了不同的方法，最终找到了一个灵活且可定制的解决方案。

解决方案：利用 JavaScript 和 CSS

第一步是设置轮播圆点。我使用 HTML 的 <ul> 和 <li> 元素创建了一组列表项，并为每个幻灯片分配一个单独的列表项。我将此列表放在轮播的容器内。

接下来，我使用 JavaScript 来监听轮播中的滚动事件。当用户滚动轮播时，我计算视野中显示的幻灯片数量，并使用此信息更新轮播圆点的活动状态。我使用 CSS 类来添加和删除圆点的活动状态，以反映当前显示的幻灯片。

代码实现

const carousel = document.querySelector('.carousel');
const dots = document.querySelector('.dots');

carousel.addEventListener('scroll', () => {
  const slideCount = carousel.children.length;
  const visibleSlides = Math.floor(carousel.clientWidth / carousel.children[0].clientWidth);
  const activeDot = Math.floor(carousel.scrollLeft / carousel.children[0].clientWidth) + 1;

  for (let i = 0; i < slideCount; i++) {
    dots.children[i].classList.remove('active');
  }

  dots.children[activeDot - 1].classList.add('active');
});