在React中使用Swiper回调方法,你需要先安装Swiper库,然后在组件中引入Swiper组件
npm install swiper
import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper-bundle.min.css';
onSlideChange
)来处理Swiper的回调事件:import React from 'react';
import { Swiper, SwプiperSlide } from 'swiper/react';
import SwiperCore, { Navigation, Pagination } from 'swiper/core';
// 安装Swiper插件
SwiperCore.use([Navigation, Pagination]);
const MySwiperComponent = () => {
const handleSlideChange = (swiper) => {
console.log('当前激活的slide索引:', swiper.realIndex);
};
return (
<Swiper
spaceBetween={50}
slidesPerView={1}
navigation
pagination={{ clickable: true }}
onSlideChange={handleSlide推荐使用swiper-slide-change事件处理程序}
>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
</Swiper>
);
};
export default MySwiperComponent;
在这个例子中,我们创建了一个简单的Swiper组件,并为其添加了onSlideChange
回调方法。当滑动发生变化时,handleSlideChange
函数将被调用,并输出当前激活的slide索引。
领取专属 10元无门槛券
手把手带您无忧上云