swiper

A React component for swipeable views.

Installation

Browser

npm install --save times-swiper

The problem solved

It's tiny (<10 kB gzipped), it quickly renders the swipable view.

Browser

import Swipe from 'times-swiper';
import from './node_modules/times-swiper/main.css';



export class MyComponent extends Component {
  componentDidMount(){
    const container = document.getElementById('container_div');
    const swiper = Swipe(homePageContainer,{callback:(index, element)=>{
      //do anything after swipe
    }});  
  }
  render(){
    return(
      <div id="container_div" className="swipe">
        <div className="swipe-wrap-home">
          <div>
            slide 1
          </div>
          <div>
            slide 2
          </div>
          <div>
            slide 3
          </div>
        </div>
      </div>   
    )
  }
}

export default MyComponent;

Available options:

• callback: callback function after swipe
• continuous: swiper should run continuos (default is false)
• index: swiper index value (default is 0)
• speed: speed of swipe from one slide to another (default is 300ms)

Available functions

• prev: slide to previous slide
• next: slide to next slide
• getPos: position of current slide
• getNumSlides: total number of slides
• kill: kill swiper

Who's using swiper?

• Newspoint

License

This project is licensed under the terms of the