滑动触摸开始/点击 => 触发幻灯片下一个()

Question

我想包括这个幻灯片：https://swiperjs.com/react/

由于我发现拖动下一张幻灯片不太舒服，我想将onClick事件添加到完整的Slider中，以便下一张滑动出现。

如何在React中触发slideNext()？我在阅读文档时遇到了问题/我不理解它——而且文档似乎没有告诉我如何在react中做到这一点。

在jquery中，它应该是这样的：

$('section.slideshow').on( 'click', function() {
swiper.slideNext();
});

这是我的反应代码：

import React from 'react'
import SwiperCore, { Navigation, Pagination, A11y } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/swiper.scss'
import 'swiper/components/navigation/navigation.scss'
import 'swiper/components/pagination/pagination.scss'
SwiperCore.use([Navigation, Pagination, A11y])

function Page(){
return (
<div>
<Swiper 
onClick={() => console.log('click')}
onTouchStart={() => slideNext()     }
>
<SwiperSlide>slide 1</SwiperSlide>
<SwiperSlide>slide 2</SwiperSlide>
</Swiper>
</div>
);
}
export default Page;

Answer 1

您可以选择使用文档中所写的NavigationAPI

<Swiper
navigation={{
nextEl: '.next',
}}
>
<SwiperSlide className="next">slide 1</SwiperSlide>
<SwiperSlide className="next">slide 2</SwiperSlide>
<SwiperSlide className="next">slide 3</SwiperSlide>
</Swiper>

CodeSandBox：https://codesandbox.io/s/so-react-swiper-next-slide-2714t?file=/src/App.js

Answer 2

对于React挂钩

定义这样的useState：

const [my_swiper, set_my_swiper] = useState({});

然后在你的刷卡器中这样定义：

<Swiper 
slidesPerView={1}
onInit={(ev) => {
set_my_swiper(ev)
}}>
<SwiperSlide>
<div>
Slide 1
</div>
</SwiperSlide>
<SwiperSlide>
<div>
Slide 2
</div>
</SwiperSlide>
</Swiper>

注意要绑定到变量的onInit方法

然后，您可以使用my_swiper钩子来调用类似这样的下一个/上一个函数。

my_swiper.slideNext();
my_swiper.slidePrev();

你可以在任何地方调用这些来动态控制你的刷单。

您还可以导航到任何幻灯片

my_swiper.slideTo(number);

Answer 3

我使用它如下：

<Swiper
getSwiper={this.updateSwiper}
{...params}

>{/*modules={[Navigation]}*/}
{items}
</Swiper>

通过以下功能：

updateSwiper(value:any) {
this.setState({
swiper: value
});
}
goNext = () => {
if (this.state.swiper !== null) {
this.state.swiper.slideNext();
}
};

Answer 4

如果您使用的是TypeScript进口应为：

import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore from "swiper";

定义这样的useState：

const [my_swiper, set_my_swiper] = useState<SwiperCore>({});

然后在你的刷卡器中这样定义：

<Swiper 
slidesPerView={1}
onInit={(ev) => {
set_my_swiper(ev)
}}>
<SwiperSlide>
<div>
Slide 1
</div>
</SwiperSlide>
<SwiperSlide>
<div>
Slide 2
</div>
</SwiperSlide>
</Swiper>

请注意要绑定到变量的onInit方法。

然后，您可以使用my_swiper钩子来调用下一个/上一个函数，如下所示。

my_swiper.slideNext();
my_swiper.slidePrev();

你可以在任何地方调用这些来动态控制你的刷单。

您还可以导航到任何幻灯片

my_swiper.slideTo(number);