SwiperSlide onTouchStart/onClick => 触发 slideNext()

Question

我想包含这个幻灯片：https://swiperjs.com/react/ 因为我觉得拖动幻灯片不是很舒适，所以我想在整个幻灯片中添加一个onClick事件来切换到下一张幻灯片。

在React中如何触发slideNext()？我阅读文档时遇到了问题或者说我不理解它的内容。而且似乎文档并没有说明如何在React中实现这一点。

在jquery中，代码可能是这样的：

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

这是我的 React 代码：

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;

- scco

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

CodeSandBox 是一个在线的开发环境，可以用于创建和共享 web 应用程序。上面提供了一个 React Swiper 组件的示例代码，您可以通过访问链接来查看。

- 95faf8e76605e973

Answer 2

对于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钩子来调用下一个/上一个函数，如下所示。

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

你可以随时调用这些功能来动态控制你的幻灯片。

同时，你也可以导航到任何一个幻灯片。

my_swiper.slideTo(number);

- Anutosh Chaudhuri

---

我使用了 my_swiper.slideTo(number) 方法。谢谢。 - Mo D Genesis

如果我可以给这个答案10个赞，我一定会这样做。非常感谢你。:)) - Ali Baghban

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();
    }
};

- Mojtaba Karimi

Answer 4

如果你正在使用TypeScript 导入应该是：

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

定义一个类似于useState的函数：

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

然后在你的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钩子来调用下一个/上一个函数，就像这样。

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

你可以随时调用这些方法来动态控制你的轮播器。

同时，你也可以导航到任何一张幻灯片。

my_swiper.slideTo(number);

- Tanvir Mahin