swiper-easy

下载

npm install swiper-easy --save

使用说明

import SwiperEasy from 'swiper-easy';
class Demo extends React.Component {
  
  state={
     list:[
        'swiper1',
        'swiper2',
        'swiper3',
     ]
  }
  
  componentDidMount(){
      console.log(this.refs.s);
  }
  
  render() {
      const {list} = this.state;
      const options = {
        autoplay: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        scrollbar: {
          el: '.swiper-scroll-bar',
        },
      };
      return (
        <div>
          <SwiperEasy ref='s' className='diy-className' options={options}>
            {list.map((item, index) => <div key={index}>{item}</div>)}
          </SwiperEasy>
        </div>
      );
    }
}

API

同 Swiper4

• init 初始化
• slideNext
• slidePrev
• slideTo
• slideToLoop
• update
• destroy
• getTranslate
• setTranslate
• appendSlide
• prependSlide
• addSlide
• removeSlide
• removeAllSlides

// e.g.

<SwiperEasy ref='swiper' className='diy-className' options={options}>
   <div>swiper1</div>
   <div>swiper2</div>
</SwiperEasy>

// this.refs.swiper.update();