react-id-swiper 轮播 滑块

效果图

import Swiper from 'react-id-swiper';
import 'react-id-swiper/src/styles/css/swiper.css';    //必须引入样式

 点击后调整状态，重新请求数据
  _changeIndustry (data, type) {
        const { field, topInfoList } = this.state;
        if (data !== field) {
            const periodsList = topInfoList.filter(item => item.name === data)[0].periods;
            this.setState({ field: data, periodsList, periods: periodsList[0] }, () => {
                this._getFeedbackFields();
            });
        }
    }

//函数的作用：把点击的数据赋值给field ，然后通过Classnames激活颜色红色


render(){

  Swiper 的配置信息
 const params = {
            slidesPerView: 8,       //一个轮播放八个子模块
            spaceBetween: 12,    //子模块之间的距离
            loop: false,
            navigation: {
                nextEl: '.swiper-button-next',      //向右滑动标志的类名 （右边红色的箭头）
                prevEl: '.swiper-button-prev'       //向左滑动标志的类名
            }
        };

let {  industryList ，field   } = this.state;
     industryList = industryList.concat(['1涉天然气领域', '2煤炭领域', '3道路客运领域', '4房地产领域', '5旅行社领域']);
return <div   className="center" >
 {

industryList.length &&
<Swiper {...params}>

      {industryList.map(item => <div className={Classnames('swiper-btn', { active: field === item })}   onClick={() => this._changeIndustry(item, 'field')} key={item} >{item}</div>)}

 </Swiper>

}
</div>

}

样式

  .swiper-container {
            width: 1040px;
            height: 100%;
            position: static;
        }
        .swiper-wrapper {
            span {
            text-align: center;
            color: #333;
            font-size: 16px;
            height: 24px;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;
            &.active {
                color: $primary;
                font-weight: bold;
            }
            }
        }
        .swiper-button-prev,
        .swiper-button-next {
            width: 10px;
            height: 17px;
            background-size: 12px 20px;
            margin-top: 0px;
            top: 5px;
        }
        .swiper-button-prev{
            background-image: url('../../../../../../images/application/arrowLeft.png');
        }
        .swiper-button-next{
            background-image: url('../../../../../../images/application/arrowRight.png');
        }


  .center.sub-center{
            width: 80%;
            margin: 20px auto;
            text-align: center;
            .swiper-btn {
                width: 80px;
                line-height: 24px;
                font-weight: bold;
                background: transparent;
                // background-size: 100% 100%;
                text-align: center;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                cursor: pointer;
                padding: 0 10px;
                margin: 0 12px;
                &.active {
                    background: transparent;
                    border: 1px solid $border-color;
                    color: $primary;
                    border-radius:4px;
                }
            }
        }

海南->信用主体评价->反馈信息