如何在我的自定义轮播上创建点？

问题描述

我仍然是 CSS 和 Javascript 的初学者。我尝试使用 CSS 和 JavaScript 制作一个 carousel。

我想知道如何为自定义轮播上的点创建逻辑？

我创建了按钮，他们正在努力传递幻灯片。但是你能告诉我如何创建这些点吗？

这是我在 codesandbox 中的项目

export function usePosition(ref) {
  const [prevElement,setPrevElement] = React.useState(null);
  const [nextElement,setNextElement] = React.useState(null);

  React.useEffect(() => {
    const element = ref.current;

    const update = () => {
      const rect = element.getBoundingClientRect();

      const visibleElements = Array.from(element.children).filter((child) => {
        const childRect = child.getBoundingClientRect();

        return rect.left <= childRect.left && rect.right >= childRect.right;
      });

      if (visibleElements.length > 0) {
        setPrevElement(getPrevElement(visibleElements));
        setNextElement(getNextElement(visibleElements));
      }
    };

    update();
    element.addEventListener("scroll",update,{ passive: true });

    return () => {
      element.removeEventListener("scroll",{ passive: true });
    };
  },[ref]);

  const scrolltoElement = React.useCallback(
    (element) => {
      const currentNode = ref.current;

      if (!currentNode || !element) return;

      let newScrollPosition;

      newScrollPosition =
        element.offsetLeft +
        element.getBoundingClientRect().width / 2 -
        currentNode.getBoundingClientRect().width / 2;

      console.log("newScrollPosition: ",newScrollPosition);

      currentNode.scroll({
        left: newScrollPosition,behavior: "smooth"
      });
    },[ref]
  );

  const scrollRight = React.useCallback(() => scrolltoElement(nextElement),[
    scrolltoElement,nextElement
  ]);

  return {
    hasItemsOnLeft: prevElement !== null,hasItemsOnRight: nextElement !== null,scrollRight,scrollLeft
  };
}

在此先感谢您的帮助！！

解决方法

您会在下面找到我的解决方案，我从沙箱中取出您的代码并使用它。我不明白您是否想显示点，滚动和同步点并单击点以更改图像，所以我做了所有这些。 codesandbox