react 中使用swiper插件

1.第一步：下载

npm i swiper

2。第二步：使用

默认情况下，Swipler反应使用刷的核心版本（没有任何附加模块）。如果想使用导航、分页和其他模块，您必须首先引入它们。在Swiper标签中添加module属性，增加模块。具体的可以参照swiper官网~css样式也可以参照swiper官网

swiper可以在原生js中使用，还可以在react，vue等框架中使用

// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';


export default () => {
    // Now you can use Swiper
    return (
        <Swiper
            modules={[Navigation, Pagination, Scrollbar, A11y]}
            spaceBetween={50}
            slidesPerView={3}
            onSlideChange={() => console.log('slide change')}
            onSwiper={(swiper) => console.log(swiper)}
            pagination={{ clickable: true }}
            scrollbar={{ draggable: true }}
        >
            <SwiperSlide>Slide 1</SwiperSlide>
            <SwiperSlide>Slide 2</SwiperSlide>
            <SwiperSlide>Slide 3</SwiperSlide>
            <SwiperSlide>Slide 4</SwiperSlide>
            ...
        </Swiper>
    );
};

swiper官网：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发