敏锐的滑块反应js额外的点显示问题

Question

有一个我无法解决的错误在敏锐的滑块反应js中有一个错误，当没有更多的项目要滑动但点出现时

有代码沙盒代码https://codesandbox.io/s/quiet-fog-ekwqd?file=/src/App.js

Answer 1

由于库没有提供明显的解决方案，因此设置了一个小于最大点的变通方法。

在你的情况下-2〃；获取幻灯片长度时：

{slider && (
<div className="dots">
{[...Array(slider.details().size - 2).keys()].map((idx) => {
return (
<button
key={idx}
onClick={() => {
slider.moveToSlideRelative(idx)
}}
className={"dot" + (currentSlide === idx ? " active" : "")}
/>
)
})}
</div>
)}

Answer 2

对于其他面临相同问题的人，请使用敏锐滑块我相信您使用的是BREAKTPOINTS，这就是问题所在，因为在使用点的示例中没有断点，但为了考虑断点的计算，请使用以下

const perSlideConf=instanceRef.current？。选项？。幻灯片？。perView-1？？0；

const [ref, instanceRef] = useKeenSlider<HTMLDivElement>({
mode: "free",
rtl: lng === "ar",
breakpoints: {
"(min-width: 700px)": {
slides: { perView: 3, spacing: 5 },
},
"(min-width: 1400px)": {
slides: { perView: 4, spacing: 5 },
},
},
slides: {
perView: 1,
spacing: 0,
},
slideChanged(slider) {
setCurrentSlide(slider.track.details.rel);
},
created() {
!!salonsData && setLoaded(true);
},
});

const perSlideConf = instanceRef.current?.options?.slides?.perView - 1 ?? 0;

然后

{[
...Array(
instanceRef.current.track.details.slides.length - perSlideConf,
).keys(),
].map(idx => {
return (
<button
key={idx}
onClick={() => {
instanceRef.current?.moveToIdx(idx);
}}
className={cn(
"border-none w-[10px] h-[10px] bg-gray-300 rounded-full mx-[5px] p-[5px] cursor-pointer ",
currentSlide === idx ? "bg-[#6E4B87]" : "",
)}
></button>
);
})}