ReactAntd(十三) ANTD-使用react-awesome-swiper

React 使用 awesome-swiper 使用

安装包依赖

cnpm install react-awesome-swiper -S

使用

• 新建一个 style.less 文件,特别注意的就是必须要有 opacity

.swiperAll {
  width: 100%;
  height: 600px;
  .swiper-wrapper {
    width: 100%;
    height: 100%;
  }
  .swiper-pagination {
    opacity: 1 !important;
  }
}

• js 代码使用

import AwesomeSwiper from 'react-awesome-swiper'
import './style.less' //这里特别强调的是必须引入

class CarsousedComponent extends Component {
  swiperRef = null //用于元素
  constructor(props) {
    super(props)
    this.state = {
      message: 'Gallery',
      text: '这就是测试数据',
      defaultActiveKey: ['1'],
      config: {
        loop: true,
        observer: true, //调完接口不能翻页解决方法，修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //调完接口不能翻页解决方法，修改swiper的父元素时，自动初始化swiper

        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false, //点击后是否停止自动播放
        },
        // Disable preloading of all images
        preloadImages: false,
        // Enable lazy loading
        lazy: true,
        speed: 500,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        pagination: {
          el: '.swiper-pagination',
          bulletElement: 'li',
          hideOnClick: true,
          clickable: true,
        },
        on: {
          slideChange: function () {
            console.log(this.activeIndex)
          },
        },
      },
    }
    this.goNext = this.goNext.bind(this)
  }
  componentDidMount() {}
  render() {
    return (
      <Fragment>
        <AwesomeSwiper
          ref={(ref) => (this.swiperRef = ref)}
          config={this.state.config}
          className="swiperAll"
        >
          <div className="swiper-wrapper">
            <div className="swiper-slide">
              <img src={imgurl1} alt="" />
            </div>
            <div className="swiper-slide">
              <img src={imgurl2} alt="" />
            </div>
            <div className="swiper-slide">
              <img src={imgurl3} alt="" />
            </div>
            <div className="swiper-slide">
              <img src={imgurl1} alt="" />
            </div>
            <div className="swiper-slide">
              <img src={imgurl2} alt="" />
            </div>
            <div className="swiper-slide">
              <img src={imgurl3} alt="" />
            </div>
          </div>
          <div className="swiper-button-prev"></div>
          <div className="swiper-button-next"></div>
          <div className="swiper-pagination"></div>
        </AwesomeSwiper>
      </Fragment>
    )
  }
  goNext(e) {
    //这里面的 e是个数组获取到key值,如果是都展开的就存储所有的key,都收缩的就是空
    console.log(e)
  }
}

export default CarsousedComponent

• 剩下的参数可以按照 swiper 入手