react 使用swiper插件

首先引入插件 npm i swiper

如果需要做适配，可以通过屏幕尺寸来计算有多少个SwiperSlide，每个SwiperSlide里面有多少个数据

返回到第一页

this.swiperDom.slideTo(0);

render（）

import { Component } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Autoplay, Navigation, Pagination } from 'swiper/core';
import 'swiper/css';
import 'swiper/css/bundle';
render() {
        let { templateList, isMobile } = this.props;
        let { isBegin, isEnd } = this.state;
        let classLeft = classname(Style.preBtn, Style.btn, isBegin ? Style.none : '', 'swiper-button-left', {
            [Style.mobileLeft]: isMobile,
        });
        let classRight = classname(Style.nextBtn, Style.btn, isEnd ? Style.none : '', 'swiper-button-right', {
            [Style.mobileRight]: isMobile,
        });

        return (
            <div className={Style.content_box}>
                <Swiper
                    // spaceBetween={spaceBetween}
                    slidesPerView={1}
                    pagination={{
                        clickable: true,
                    }}
                    onSwiper={swiper => {
                        this.swiperDom = swiper;
                    }}
                    modules={[Navigation]}
                    navigation={{
                        nextEl: '.swiper-button-right',
                        prevEl: '.swiper-button-left',
                    }}
                    onSlideChange={data => {
                        this.setState({
                            isBegin: data.isBeginning,
                            isEnd: data.isEnd,
                        });
                    }}
                    className={classname(Style.swiper, 'swiper')}
                >
                    {templateList.map((item, index) => {
                        let isEnd = index === templateList.length - 1;
                        return (
                            <SwiperSlide
                                key={index}
                                className={classname(Style.swiperSlide, { [Style.swiperSlide_start]: isEnd })}
                            >
                                {this._drawItem(item, isEnd)}
                            </SwiperSlide>
                        );
                    })}
                    <div className={classLeft}>
                        <FJSvg src={arrowRight} className={Style.leftIcon} />
                    </div>
                    <div className={classRight}>
                        <FJSvg src={arrowRight} />
                    </div>
                </Swiper>
            </div>
        );