React.js 轮播图 react-swipe

 我下载的版本是5.1.1 因为最新的版本 用的时候发现了问题 没有用

npm install [email protected] --save

import React from 'react';
import ReactSwipe from 'react-swipe';
import './style.less';

class Category extends React.Component{
  constructor() {
    super();
    this.state = {
      index: 0
    }
  }
  render() {
    let opt = {
      auto: 2000,
      callback: function(index) {
        console.log(index);
        this.setState({index: Number(index)})
      }.bind(this)
    }
   
    return (
      <div id="home-category">
        <ReactSwipe className="carousel" swipeOptions={opt}>
          <div className="carousel-item">
            <ul className='clear-fix'>
              <li className="float-left ktv">KTV</li>
              <li className="float-left ktv">KTV</li>
              <li className="float-left ktv">KTV</li>
              <li className="float-left ktv">KTV</li>
              <li className="float-left ktv">KTV</li>
              <li className="float-left ktv">KTV</li>
              <li className="float-left ktv">KTV</li>
              <li className="float-left ktv">KTV</li>
              <li className="float-left ktv">KTV</li>
              <li className="float-left ktv">KTV</li>
            </ul>
          </div>
          <div className="carousel-item">
            <ul className='clear-fix'>
              <li className="float-left meishi">KTV</li>
              <li className="float-left jiudian">KTV</li>
              <li className="float-left meishi">KTV</li>
              <li className="float-left waimai">KTV</li>
              <li className="float-left meishi">KTV</li>
              <li className="float-left meishi">KTV</li>
              <li className="float-left dujiachuxing">KTV</li>
              <li className="float-left zuliaoanmo">KTV</li>
              <li className="float-left ribencai">KTV</li>
              <li className="float-left ribencai">KTV</li>
            </ul>
          </div>
          <div className="carousel-item">
            <ul className='clear-fix'>
              <li className="float-left xican">SPA</li>
              <li className="float-left xican">SPA</li>
              <li className="float-left xican">SPA</li>
              <li className="float-left xican">SPA</li>
              <li className="float-left xican">SPA</li>
              <li className="float-left xican">SPA</li>
              <li className="float-left xican">SPA</li>
              <li className="float-left xican">SPA</li>
              <li className="float-left xican">SPA</li>
              <li className="float-left xican">SPA</li>
            </ul>
          </div>
        </ReactSwipe>
        <div className="index-container">
          <ul>
            <li className={this.state.index === 0 ? 'selected': ''}></li>
            <li className={this.state.index === 1 ? 'selected': ''}></li>
            <li className={this.state.index === 2 ? 'selected': ''}></li>
          </ul>
        </div>
      </div>
    )
  }
  componentDidUpdate() {
  }
}

export default Category;