将活动幻灯片设置为滑动/反应状态

Question

我想问一下，是否有一种方法可以用滑动器/react控制/设置活动幻灯片？

我试着用道具处理onSwiper功能，但仍然无法更新幻灯片索引。

谢谢

Answer 1

您可以使用刷单实例访问刷单API(https://swiperjs.com/api/)并且存在方法CCD_ 1。

所以在代码示例中，它看起来像这个

const App = () => {
// store swiper instance
const [swiper, setSwiper] = useState(null);
const slideTo = (index) => swiper.slideTo(index);
return (
<Swiper onSwiper={setSwiper} >
{/* ... */}
</Swiper>
)
}

Answer 2

只需使用此

const App = () => {

const [swiper, setSwiper] = useState(null);
const slideTo = (index) => {
if(swiper) 
swiper.slideTo(index)};
return (
<Swiper onSwiper={setSwiper} >
{/* ... */}
</Swiper>
)
}

Answer 3

您可以使用useSwiper在React上获取swiper内部的swiper实例，然后自由控制swiper的行为，包括使用slideTo方法。

类似：

import { Swiper, useSwiper } from 'swiper/react'
const SomethingInsideSwiper = () => {
const swiper = useSwiper()
// on click
const handleOnSetSwiper = () => {
swiper.slideTo(/* index */)
}
// or use side effect
useEffect(() => {
swiper.slideTo(/* index */)
}, /* [state] if you need controlled by a state */)
return (<>{/* ...... /*}</>)
}
const App = () => {
return (
<Swiper {/* SwiperProps */} >
<SomethingInsideSwiper />
</Swiper>
)
}

Answer 4

更新的选项是在<Swiper>实例上设置initialSlide={specificIndex}。如果您知道要滑动到哪个索引，只需设置"；initialSlide"；Swiper道具。

像这里：

<Swiper initialSlide={clickedIndex}>
<SwiperSlide>
Slide content 1
</SwiperSlide>
<SwiperSlide>
Slide content 2
</SwiperSlide>
<SwiperSlide>
Slide content 3
</SwiperSlide>
</Swiper>

我只在React 17中测试了这个。

Answer 5

在typescript中，我在尝试使用onSwiper时遇到以下错误：

Type 'Dispatch<SetStateAction<null>>' is not assignable to type '(swiper: Swiper) => void'

我使用与演示中完全相同的代码。