@reuse-sh /旋转木马

一个旋转木马，保持原生触摸和触控板滚动与CSS快照。它增加了鼠标拖动、分组、RTL、同步轮播、可选的重复和自动播放。

原则

这些是代码遵守的规则。对任何框架的适应也会保留它们。

• 让浏览器滚动。 触摸板和触控板使用CSS滚动卡来滚动，代码的每一个移动也是一个滚动。
• 永远不要让拖动点击。 鼠标拖动或鼠标按下使移动条停止，永远不会打开它下面的链接。普通的点击仍然可以工作，触摸仍然是原生的。
• 像触控板一样拖动。 松开鼠标拖动会保持其速度，并滑动到最接近它要停止的幻灯片，而不会超过要求停止的幻灯片。过了任何一端，它都伸展并弹回来。
• 重复，不要克隆。 循环移动原始幻灯片，因此id、链接和按钮保持唯一，并且只有当幻灯片覆盖视口时才会打开。
• 让自动播放等人。 自动播放暂停悬停，聚焦，拖动，隐藏页面，屏幕外条带和减少运动。
• 把钥匙放在本地。 箭头键仅在聚焦条内起作用，并在从右到左的布局中交换两侧。
• 把它移动的东西放回去。 Destroy取消计时器并恢复它添加的样式、转换和侦听器。

安装

npm install @reuse-sh/carousel

浏览器

import { createCarousel } from "@reuse-sh/carousel";
import "@reuse-sh/carousel/styles.css";

const viewport = document.querySelector("[data-carousel]");
const carousel = createCarousel(viewport, {
  align: "center",
  loop: true,
});
nextButton.addEventListener("click", () => carousel.next());
carousel.subscribe((state) => {
  counter.textContent = String(state.index + 1);
});

反应

import { useCarousel } from "@reuse-sh/carousel/react";
import "@reuse-sh/carousel/styles.css";

function Gallery({ children }) {
  const { ref, carousel } = useCarousel({ loop: true });
  return <>
    <div ref={ref} className="re-carousel">
      {children}
    </div>
    <button onClick={() => carousel?.next()}>Next</button>
  </>;
}

文档

• 示例和API： https://reuse.sh/carousel
• 编码代理指南： https://reuse.sh/carousel/guide.md

许可证

麻省理工学院