Skip to content

midstem/swipi

Repository files navigation

Swipi

NPM version bundle size

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

Browsers support

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
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

config parameters:

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