基于react和swiper4实现无缝轮播组件 中间显示主图 左右显示部分图

swiper4中文文档

子组件 commonSwiper.js

import React, {Component} from 'react'
import ImportedImage from '../../../common/components/importedImage'
import '../../../common/sass/swiper'
import Swiper from '../../../common/js/swiper'
/*
* 调用示例: 
*   <SwiperHtml
*       list={list} 必传-轮播列表 
*       courseInfo={courseInfo} 非必传-课程介绍 
*       isShowPagination={false} 非必传-是否展示分页器(默认不展示)
*       isLoop={true} 非必传-是否循环轮播展示(默认循环展示)
*       clickEvent={t.clickSwiper.bind(t)}> 非必传-事件回调 
*       isAuto={isAuto} 非必传-是否自动播放 默认不自动播放
*   </SwiperHtml>
*
*/


/*
* 参数示例: 
* list: [{
*    id: 1,
*    name: 'aaaaa',
*    title: '标题标题标题标题标题',
*    pic: pic1, // swiper 图片的src
*    url: url, // 点击swiper跳转的url,
*    text: [
*        '介绍1介绍1介绍1介绍1',
*        '介绍2介绍2介绍2介绍2',
*        '介绍3介绍3介绍3介绍3',
*        '介绍4介绍4介绍4介绍4',
*    ]
* }]
*  
*  
*  isAuto示例
*  autoplay:true,//等同于以下设置
*  autoplay: {
*    delay: 3000,
*    stopOnLastSlide: false,
*    disableOnInteraction: true,// 用户操作swiper之后，是否禁止autoplay。默认为true：停止。
*  },
*/

class App extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        const t = this;
        let list = t.props.list;
        let isLoop = t.props.isLoop || true;
        let isAuto = t.props.isAuto || false;

        var mySwiper = new Swiper ('.swiper-container', {
            direction: 'horizontal',
            loop: isLoop,
            slidesPerView: "auto",
            centeredSlides:true,
            spaceBetween: 20,
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination'
            },
            on: {
                click: (event) => {
                    if(t.props.clickEvent) {
                        t.props.clickEvent(event, mySwiper);
                    }
                }
            },     

        })    

    }    

    render() {
        const t = this;
        const {list, isShowPagination, courseInfo} = t.props;
        return (
            <div>
                <div className="swiper-container">
                    <div className="swiper-wrapper">
                        {
                            list.map((item, index) =>
                                <div className="swiper-slide">
                                    <ImportedImage img={item.pic}></ImportedImage>
                                    {courseInfo && courseInfo[index]}
                                </div>
                            )
                        }
                    </div>
                    <div className="swiper-pagination" style={isShowPagination ? {'display':'block'} : {'display': 'none'}}></div>
                </div>
            </div>
        )
    }
}
export default App;

父组件

/*事件回调
* 这里做了2件事 1.点击slide上的+号 有其他处理
* 2. 点击整个slide会进行相应跳转
*/ 
clickSwiper(event, mySwiper) {
    const t = this;
    const {list} = t.state;
    const index = mySwiper.activeIndex % list.length;
    const type = event.target.getAttribute("data-type");
    const id = event.target.getAttribute("data-id");
    if (type == 'add') {
        t.onBtnAdd(id);
    }
    else {
        window.location.href = list[index].url;
    }
}

// html
<div id="slide">
	<SwiperHtml
		list={list}
		courseInfo={courseInfo}
		isShowPagination={false}
		clickEvent={t.clickSwiper.bind(t)}>
	</SwiperHtml>
</div>   

css

#slide{
    width: 100%;
    .swiper-pagination-bullet-active{
        background: #ff7327;
    }
    .swiper-container{
        height:u(600px);
    }
    .swiper-slide{
        width: 76%;
        height:u(590px);
        float: left;
        position: relative;
        border-radius: u(30px);
        overflow: hidden;
        box-sizing: border-box;
        background: #fff;
        box-shadow: #f2f2f2 0px u(10px) u(10px);
        .icon{
            width: 0.8rem;
            height: 1rem;
            background: url('../assets/gather/slide/icons.png') no-repeat;
            background-size: 7.08rem 2.3rem;
            background-position: -6.24rem 0;
            position: absolute;
            bottom: 0.3rem;
            right: 0.2rem;
            z-index: 99;
        }
        .img{
            width: 200%;
            height: u(260px);
        }
        .title{
            width: 86%;
            margin: 0 auto;
            font-size: u(30px);
            color: #333;
            text-align: left;
            margin-top: u(30px);
        }
        .content{
            width: 80%;
            margin: 0 auto;
            box-sizing: border-box;
            font-size: u(24px);
            color: #666;
            margin-top: u(24px);
            li{
                padding-top: u(16px);
            }
        }
    }
    .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
        height: 0.4rem;
        line-height: 0;
    }

}

效果图