SwiperSlide onTouchStart/onClick => 触发slideNext()

Question

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

由于我发现拖动下一张幻灯片不太舒服，因此我想onClick向完整滑块添加一个事件，以便下一张幻灯片出现。

如何slideNext()在 React 中触发 a ？我在阅读文档时遇到问题/我不理解它 - 并且文档似乎没有告诉如何在反应中执行此操作。

在 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

您可以选择使用文档Navigation中编写的 API

<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

对于反应钩子

像这样定义一个 useState：

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

然后在你的滑动器中像这样定义它：

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

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

然后你可以使用my_swiperhook 来调用下一个/上一个函数，如下所示。

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

您可以在任何地方调用它们来动态控制您的滑动器。

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

my_swiper.slideTo(number);