我有一个用 react 制作的 swiper.js 滑块。如果我在 swiper 中有 8 个图像,然后我导航到第 8 个缩略图并单击第 7 个缩略图,它将向上滑动缩略图部分。有没有办法防止这种行为的发生?
我想要做的是让它仅在有更多可用的向上或向下滑动时才自动滑动。例如,如果我有 5 个缩略图并且幻灯片 [2, 3, 4, 5, 6] 是可见的,如果我选择幻灯片 6,它会移动并显示幻灯片 7 可用,如果我选择幻灯片 2 它会滑过并显示幻灯片 1. 这是我想让它做的唯一动作。该功能在文档中可用吗?
<div className="mainSliderWrap">
<Swiper
pagination
onSlideChange={swiper => {
setImageSelectedIndex(swiper.activeIndex + 1)
return true
}}
thumbs={{ swiper: thumbsSwiper }}>
{products.images.map((product, index) => (
<SwiperSlide key={product.originalSrc}>
<img
className={classes.mainSliderImg}
ref={el => {
imagesRef.current[index] = el as HTMLImageElement
}}
src={product.originalSrc}
data-zoom={product.originalSrc}
alt={product.title}
height={360}
width={360}
/>
</SwiperSlide>
))}
</Swiper>
</div>
<div
className={[
"productSlider",
ProductSliderOrientation(width) === "horizontal" && …Run Code Online (Sandbox Code Playgroud)