├── .github
└── FUNDING.yml
├── .gitignore
├── README.md
├── dist
└── ReactSwiper.js
├── hash.js
├── index.jsx
├── jsconfig.json
├── package-lock.json
├── package.json
├── types
└── index.d.ts
└── webpack.config.prod.js
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 |
3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
4 | patreon: # Replace with a single Patreon username
5 | open_collective: # Replace with a single Open Collective username
6 | ko_fi: # Replace with a single Ko-fi username
7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | custom: ['https://leeseean.github.io/source-zone/wx.png','https://leeseean.github.io/source-zone/zfb.jpg']
13 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 |
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 |
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 |
23 | package-lock.json
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-awesome-swiper
2 |
3 | >Swiper4 component for React, support pc and mobile, support typescript
4 |
5 | # install
6 |
7 | >```npm install react-awesome-swiper```
8 |
9 | # API document
10 |
11 | >see [api document](https://swiperjs.com/api/) page
12 |
13 | # examples
14 |
15 | >see [demos](https://swiperjs.com/demos/) page
16 |
17 | # usage
18 | >config is as the same as [Swiper.js](http://www.idangero.us/swiper/get-started/)
19 | ```javascript
20 | import React from 'react';
21 | import AwesomeSwiper from 'react-awesome-swiper';
22 | //this config is same as idangrous swiper
23 | const config = {
24 | loop : true,
25 | autoplay: {
26 | delay: 3000,
27 | stopOnLastSlide: false,
28 | disableOnInteraction: true,
29 | },
30 | // Disable preloading of all images
31 | preloadImages: false,
32 | // Enable lazy loading
33 | lazy: true,
34 | speed: 500,
35 | navigation: {
36 | nextEl: '.swiper-button-next',
37 | prevEl: '.swiper-button-prev',
38 | },
39 | pagination: {
40 | el: '.swiper-pagination',
41 | bulletElement : 'li',
42 | hideOnClick :true,
43 | clickable :true,
44 | },
45 | on: {
46 | slideChange: function () {
47 | console.log(this.activeIndex);
48 | },
49 | },
50 | };
51 | class Example extends React.Component {
52 | swiperRef = null
53 | goNext = () => {//use `this.swiperRef.swiper` to get the instance of Swiper
54 | this.swiperRef.swiper.slideNext();
55 | }
56 | render() {
57 |
58 | return (
59 | (this.swiperRef = ref)} config={config} className="your-classname">
60 |
61 |
slider1
62 |
slider2
63 |
slider3
64 |