Miss any of our Open RFC calls?Watch the recordings here! »

swiper-easy

1.0.5 • Public • Published

swiper-easy

version React MIT PRs Welcome

下载

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();

Install

npm i swiper-easy

DownloadsWeekly Downloads

3

Version

1.0.5

License

MIT

Unpacked Size

373 kB

Total Files

8

Last publish

Collaborators

  • avatar