https://github.com/leeseean/react-awesome-swiper

Swiper4 component for React, support pc and mobile,support typescript
https://github.com/leeseean/react-awesome-swiper

List: react-awesome-swiper

idangerous react react-swiper swiper typescript

Last synced: 4 months ago
JSON representation

Swiper4 component for React, support pc and mobile,support typescript

• Host: GitHub
• URL: https://github.com/leeseean/react-awesome-swiper
• Owner: leeseean
• Created: 2018-09-29T19:02:02.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-02T12:51:43.000Z (over 3 years ago)
• Last Synced: 2025-11-08T07:02:59.168Z (8 months ago)
• Topics: idangerous, react, react-swiper, swiper, typescript
• Language: JavaScript
• Homepage:
• Size: 438 KB
• Stars: 17
• Watchers: 2
• Forks: 3
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

          
# react-awesome-swiper

>Swiper4 component for React, support pc and mobile, support typescript

# install

>```npm install react-awesome-swiper```

# API document

 >see [api document](https://swiperjs.com/api/) page

# examples

 >see [demos](https://swiperjs.com/demos/) page

# usage

>config is as the same as [Swiper.js](http://www.idangero.us/swiper/get-started/)

```javascript

import React from 'react';

import AwesomeSwiper from 'react-awesome-swiper';

//this config is same as idangrous swiper

const config = {

  loop : true,

  autoplay: {

    delay: 3000,

    stopOnLastSlide: false,

    disableOnInteraction: true,

  },

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

    },

  },

};

class Example extends React.Component {

  swiperRef = null

  goNext = () => {//use `this.swiperRef.swiper` to get the instance of Swiper

    this.swiperRef.swiper.slideNext();

  }

  render() {

    return (

       (this.swiperRef = ref)} config={config} className="your-classname">

        


          
slider1

          
slider2

          
slider3

        

        


        


        


      

    )

  }

}


export default Example;

```