SwiperSlide onTouchStart/onClick => 触发 slideNext()答案

【问题标题】：SwiperSlide onTouchStart/onClick => trigger slideNext()SwiperSlide onTouchStart/onClick => 触发 slideNext()
【发布时间】：2020-11-28 10:38:53
【问题描述】：

我想加入这个幻灯片：https://swiperjs.com/react/

因为我发现拖动下一张幻灯片不太舒服，所以我想在完整的 Slider 中添加一个 onClick 事件，以便下一张幻灯片出现。

如何在 React 中触发 slideNext()？我在阅读文档时遇到问题/我不明白 - 文档似乎没有说明如何在反应中做到这一点。

在 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;

【问题讨论】：

标签： reactjs slideshow swiper

【解决方案1】：

对于 React Hooks

像这样定义一个 useState：

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

然后在你的 swiper 中这样定义它：

<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 hook 像这样调用下一个/上一个函数。

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

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

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

my_swiper.slideTo(number);

【讨论】：

我使用了 my_swiper.slideTo(number) 方法。谢谢。

【解决方案2】：

您可以选择使用Navigation API，如docs 中所述

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

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

【讨论】：

【解决方案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();
    }
};

【讨论】：