【希望别嫌弃我这个新手。。】react 写一个 左右点击切换图片的效果，怎样在单独组件里用swiper写？

#1

扒了几个 案例，看不太懂，求大神指导

#2

react 技术交流 QQ群 15073987 欢迎加入

#4

`/**

  • 伪标签：公共导航栏
  • tzw 2017年5月25日17:55:57
    */
    import React from “react”;
    import { Link } from “react-router-dom”;
    import { observer, inject } from “mobx-react”;
    import style from “./style.scss”;

import banner from “…/…/…/lib/scss/swiper-3.4.2.min.scss”;

@observer
export default class Banner extends React.Component{
constructor(props) {
super(props);
}

render (){
    const { props } = this;

    let image_list = props["data-list"],
        class_name = banner["swiper-container"]+ " "+ banner["swiper-container-horizontal"];

    class_name += " "+ props.className;

    return (
    <div style={props.style} className={ class_name }>
        <div className={ banner["swiper-wrapper"] }>
        {
            image_list && image_list.map(function(item, index){
                if (item.link) {
                    return <Link to={item.link} className={ banner["swiper-slide"] } title={item.title}
                        style={{ backgroundImage: "url("+item.imagePath+")", backgroundPosition: item.position, backgroundSize: item.size, backgroundRepeat: item.repeat }} 
                        key={ index }></Link>
                } else {
                    return <div className={ banner["swiper-slide"] } title={item.title}
                        style={{ backgroundImage: "url("+item.imagePath+")", backgroundPosition: item.position, backgroundSize: item.size, backgroundRepeat: item.repeat }} 
                        key={ index }></div>
                }
            })
        }
        </div>

        {/* 分页器 */}
        <div className={ banner["swiper-pagination"]+ " "+ banner["swiper-pagination-bullets"] }></div>
    </div>);
}

componentDidMount(){
    // 实例化轮播图
    this.mySwiper = new Swiper ("."+banner["swiper-container"], {
        loop: true,
        autoplay : 5000,

        // 设置动态类名
        slideClass : banner["swiper-slide"],
        wrapperClass : banner["swiper-wrapper"],
        paginationClass: banner["swiper-pagination"],
        bulletClass : banner["swiper-pagination-bullet"],
        bulletActiveClass : banner["swiper-pagination-bullet-active"],

        // 如果需要分页器
        pagination: "."+ banner["swiper-pagination"],
    })
}

componentDidUpdate(){
    // 更新
    this.mySwiper.update();
    // 重新建环
    this.mySwiper.reLoop();
    // 重置索引
    this.mySwiper.slideTo(1, 0, false);
    // 开始自动播放
    this.mySwiper.startAutoplay();
}

}`