Swipi
Swipi is a lightweight and compact slider optimized for mobile use. It's built with TypeScript and has a fast loading speed. It's also swipeable, making it easy for users to switch slides with a swipe on their mobile device. Its mobile-friendly design and convenience make it a great choice for improving user experience.
Installation
npm
$ npm install swipi
yarn
$ yarn add swipi
Usage
import Swipi from 'swipi'
const styles = { height: '250px', backgroundColor: '#dadada' }
export const App = () => (
<Swipi
loop
showDots
spaceBetweenSlides={15}
>
<div style={styles} />
<div style={styles} />
<div style={styles} />
<div style={styles} />
<div style={styles} />
</Swipi>
)
🔥 View more examples and create a custom slider
Browsers support
IE / Edge |
Firefox |
Chrome |
Safari |
Opera |
---|---|---|---|---|
IE11, Edge | last 3 versions | last 3 versions | last 3 versions | last 3 versions |
Props
Props |
Description |
Default |
Type |
---|---|---|---|
initialSlide | Sets the initial slide | 1 |
number |
slidesNumber | Number of visible slides (takes effect only if a user didn't set slidesNumber in the config or if the screen width is wider than what is stated in maxWidth in the config ) |
3 |
number |
spaceBetweenSlides | Space between slides (takes effect only if a user didn't set spaceBetween in the config or if the screen width is wider than what is stated in maxWidth in the config ) |
0 |
number |
animationSpeed | Sets the duration (in milliseconds) for slide transitions | 300 |
number |
showDots | Enable/disable dots | false |
boolean |
sizeForDefaultDot | Sets the size for default dot | 12 |
number |
sizeForDefaultActiveDot | Sets the size for default active dot | 12 |
number |
dotColor |
If a custom dot is not provided but showDots is set to
true then you can change the default dots color
|
'#c7c7c7' |
string |
activeDotColor |
If a custom active dot is not provided but showDots is set
to true then you can change the active dot color
|
'#000000' |
string |
customDot | Provide your custom JSX.Element | - | JSX.Element |
customActiveDot | Provide your custom active dot. It will be used to show the user what slide he is at | - | JSX.Element |
showArrows | Enable/disable arrows | true |
boolean |
prevButton | Custom element to move slides back | ᐸ |
ReactNode |
nextButton | Custom element to move slides forward | ᐳ |
ReactNode |
autoplay | A boolean that enables slides to slide automatically | false |
boolean |
autoplaySpeed | The interval in milliseconds with which the slides are changed | 4000 |
number |
biasRight | Show/hide a piece of an element that goes after visible slides | false | boolean |
loop | Makes the slider infinite | false |
boolean |
onChange | The onChange function is called every time the current index changes and returns an object with the current, previous and next indices | () => {} |
({ prev: number, current: number, next: number }) => void |
config |
Takes an array of objects to manipulate slides:
slidesNumber, maxWidth, biasRight, spaceBetween .
If config is not provided then the default
settings of its parameters are used
|
- | array |
|
|||
slidesNumber | Number of visible slides according to maxWidth prop |
- | number |
maxWidth | Defines a width after which the number of slides will change | - | number |
biasRight | Show/hide a piece of an element that goes after visible slides | - | boolean |
spaceBetween | Space between slides that can be changed according maxWidth
|
- | number |
Dots animations: |
|||
dotsAnimation | Active dot behavior | 'default' |
string |
Options for dots animations: |
|||
'default' |
The active dot instantly moves with the corresponding slide without any animation | ||
'sliding' |
The active dot smoothly slides to its new position, and the 'passive' dot smoothly fades away from the area it once occupied | ||
Slides animations: |
|||
slidesAnimation | The animation while transitioning between slides | 'default' |
string |
Options for slides animations: |
|||
'default' |
The slides change each other by sliding from left to right and vice verse, operating in a standard manner so to say | ||
'fade-in' |
The fade-in animation gradually brings an element into view, transitioning it from complete transparency to full opacity on the screen | ||
💅 Styling
.swipi-wrapper - styles the container that wraps the slider with dots
.swipi-container - styles the container that wraps slides with arrows
.dots-wrapper - styles the container that wraps the dots
.left-button - styles the left button that gets the user to the previous slide
.right-button - styles the right button that gets the user to the next slide