A library to use idangerous Swiper as a ReactJs component
A library to use Swiper as a ReactJs component (Providing lightweight version of Swiper which reduces ~40kb of minified size)
react-id-swiper ( Newest version 2.1.1 )
A library to use Swiper as a ReactJs component
What is Swiper?
Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Designed mostly for iOS, but also works great on latest Android, Windows Phone 8 and modern Desktop browsers
Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.
React-id-swiper's original props
Name | Type | Default value | Description |
---|---|---|---|
ContainerEl | String | 'div' | Element type for container |
containerClass | String | swiper-container | Swiper container class name |
WrapperEl | String | 'div' | Element type for wrapper |
wrapperClass | String | swiper-wrapper | Swiper wrapper class name |
slideClass | String | swiper-slide | Swiper slide class name |
shouldSwiperUpdate | Boolean | false | Update swiper when component is updated |
rebuildOnUpdate | Boolean | false | Rebuild swiper when component is updated |
noSwiping | Boolean | false | Disable swiping by condition |
activeSlideKey | String | null | Initial slide index |
renderPrevButton | function | Render props function for prev button | |
renderNextButton | function | Render props function for next button | |
renderScrollbar | function | Render props function for scrollbar | |
renderPagination | function | Render props function for pagination | |
renderParallax | function | Render props function for parallax | |
getSwiper | function | Callback function that returns Swiper instance | |
modules | array | Array of Swiper modules for custom build |
NOTE: You can also use Swiper's original params too. Swiper API documentation HERE
:warning: Breaking change from 2.x
-
From version 2.0.0 requires React & ReactDOM ver >=16.8.0 to use Hooks
-
From version 2.1.1, adding new props named
modules
that can help reducing bundle file size. More info here -
Full build swiper version is available from
2.1.1
, which can be found fromreact-id-swiper/lib/ReactIdSwiper.full
.
Installation and setup
Npm package
By npm
npm install --save [email protected] [email protected]
By Yarn
yarn add [email protected] [email protected]
CDN
<script src="https://unpkg.com/[email protected]/lib/react-id-swiper.js"></script>
<script src="https://unpkg.com/[email protected]/lib/react-id-swiper.min.js"></script>
Styling
Swiper stylesheet file is required
Use Swiper stylesheet file from CDN or src/styles/
(supporting css, scss)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
Examples
Find more examples here
Default
import React from 'react';
import Swiper from 'react-id-swiper';
const SimpleSwiper = () => (
<Swiper>
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
<div>Slide 4</div>
<div>Slide 5</div>
</Swiper>
)
export default SimpleSwiper;
Using full version of Swiper
import React from 'react';
import Swiper from 'react-id-swiper/lib/ReactIdSwiper.full';
const SimpleSwiper = () => (
<Swiper>
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
<div>Slide 4</div>
<div>Slide 5</div>
</Swiper>
)
export default SimpleSwiper;
Using params
import React from 'react';
import Swiper from 'react-id-swiper';
// Need to add Pagination, Navigation modules
import { Pagination, Navigation } from 'swiper/dist/js/swiper.esm'
const SimpleSwiperWithParams = () => {
const params = {
modules: [Pagination, Navigation],
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
spaceBetween: 30
}
return(
<Swiper {...params}>
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
<div>Slide 4</div>
<div>Slide 5</div>
</Swiper>
)
}
export default SimpleSwiperWithParams;
Manipulating swiper from outside swiper component
import React, { useState } from 'react';
import Swiper from 'react-id-swiper';
import { Navigation } from 'swiper/dist/js/swiper.esm'
const ManipulatingSwiper = () => {
const [swiper, updateSwiper] = useState(null);
const goNext = () => {
if (swiper !== null) {
swiper.slideNext();
}
};
const goPrev = () => {
if (swiper !== null) {
swiper.slidePrev();
}
};
return (
<div>
<Swiper getSwiper={updateSwiper} modules={[Navigation]}>
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
<div>Slide 4</div>
<div>Slide 5</div>
</Swiper>
<button onClick={goPrev}>Prev</button>
<button onClick={goNext}>Next</button>
</div>
);
};
export default ManipulatingSwiper;
Adding customized css classes
const params = {
modules: [Pagination],
pagination: {
el: '.swiper-pagination.customized-swiper-pagination',
}, // Add your class name for pagination container
navigation: {
nextEl: '.swiper-button-next.customized-swiper-button-next', // Add your class name for next button
prevEl: '.swiper-button-prev.customized-swiper-button-prev' // Add your class name for prev button
},
containerClass: 'customized-swiper-container' // Replace swiper-container with customized-swiper-container
}
Adding customized components
For customized rendering to work, you have to use same classname with params el.
const params = {
modules: [Navigation],
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
renderPrevButton: () => <button className="swiper-button-prev">Prev</button>,
renderNextButton: () => <button className="swiper-button-next">Next</button>,
}
Workable slides
Each slide should be wrapped by HTML element
BAD CODE
<Swiper {...params}>
Slide content
</Swiper>
GOOD CODE
<Swiper {...params}>
<span>Slide content</span>
</Swiper>
Bug report
Please use the prepared Codesanbox below to reproduce your issue. Thank you!!
Authors
- Asher Nguyen - Initial work - Asher Nguyen
See also the list of contributors who participated in this project.
License
This project is licensed under the MIT License - see the LICENSE file for details