react 轮番图库swiper

相关地址

github
官方demo
api
swiper的react使用文档

实例

import React from 'react'
//引入核心和组件
import SwiperCore, {Pagination,EffectCoverflow } from 'swiper';
import { Swiper, SwiperSlide} from "swiper/react";
//引入样式
import "swiper/swiper.scss";
import "swiper/components/scrollbar/scrollbar.scss";
import "swiper/components/pagination/pagination.scss";
//加载
SwiperCore.use([Pagination,EffectCoverflow]);

function Test3(props) {
    return (
        <div style={{width:500,height:500,border:'1px solid black',margin:'0 auto'}}>
            <Swiper
                centeredSlides={true}  //居中
                pagination={{
                    clickable: true//翻页是否可点击
                }}
                loop={true} //是否循环
                effect="coverflow" //轮番图效果
                spaceBetween={50}  //间距
                slidesPerView={3}  //可预览的数量
                onSlideChange={() => console.log('slide change')} //变化事件
                onSwiper={(swiper) => console.log(swiper)}
            >
                <SwiperSlide><div style={{background:'red'}}>aaa</div></SwiperSlide>
                <SwiperSlide><div style={{background:'blue'}}>aaa</div></SwiperSlide>
                <SwiperSlide><div style={{background:'green'}}>aaa</div></SwiperSlide>
            </Swiper>
        </div>

    )
}
export default Test3

实例效果

文档要点

• < Swiper >< /Swiper > 组件的所有属性从哪看
  Swiper props
  react组件接受所有的Swiper 参数作为组件的属性，外加下面这几个,同时所有的事件都加上了on前缀，比如原来的slideChange换成了onSlideChange
  
• 翻页属性在哪：在这里

pagination={{
      clickable: true//翻页是否可点击
}}

• demo里面全都是纯html的我怎么用
  把属性抄过来就行，比如我实例中就是抄袭的 effect: 'coverflow',

 var swiper = new Swiper('.swiper-container', {
      effect: 'coverflow',
      grabCursor: true,
      centeredSlides: true,
      slidesPerView: 'auto',
      coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true,
      },
      pagination: {
        el: '.swiper-pagination',
      },
    });