swiper在react中的使用

轮播有很多的三方库可以使用，antd-mobile的 carouse，以及ele组件库中的轮播，antd里面的轮播，

下面是swiper的使用方法

import React, { useState } from 'react';
import SwiperCore, { Navigation, Pagination, Scrollbar,Thumbs, A11y } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/swiper-bundle.min.css';

// import 'swiper/components/navigation/navigation.scss';
// import 'swiper/components/pagination/pagination.scss';
// import 'swiper/components/scrollbar/scrollbar.scss';

SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Thumbs]);

const [thumbsSwiper, setThumbsSwiper] = useState(null);

<Swiper
    spaceBetween={0}
    width={0.8}
    slidesPerView={2}
    initialSlide={0} // 初始化显示哪一个
    loop={true} // 是否循环
    threshold={100}
    navigation
    pagination={{ clickable: true }}
    scrollbar={{ draggable: true }}
    thumbs={{ swiper: thumbsSwiper }}
    onReachEnd={() => { console.log('on reach end') }}
    onSlideChange={() => console.log('on slide change')}
    onSwiper={(swiper) => console.log(swiper, 'onSwiper')}
    >
    {/* <SwiperSlide>
      Slide 1
    </SwiperSlide>
    <SwiperSlide>
      Slide 2
    </SwiperSlide>

    {/* <span slot="container-start">Container Start</span>
    <span slot="container-end">Container End</span>
    <span slot="wrapper-start">Wrapper Start</span>
    <span slot="wrapper-end">Wrapper End</span> */}

    </Swiper>