@fil1pe/react-slider v1.13.5

React Slider

This is a simple slider implementation in React. Make your own carousels of images, texts or whatever you need easily with this component and some stylesheet.

Installation

npm

$ npm install @fil1pe/react-slider

yarn

$ yarn add @fil1pe/react-slider

Usage

In your JSX file, import the slider component and the CSS file as in the example below. You are free to customize it using the prop className and the classes that follow.

Usage with Next.js

If you are using this package with Next.js, you need to add the following configuration to your next.config.js (or next.config.mjs) file to ensure the package is transpiled correctly:

module.exports = {
  transpilePackages: ['@fil1pe/react-slider'],
}

Classes

Component props

Methods

Referencing the slider allows you to manually change the current slide through the methods below.

Provider

The SliderProvider exported by this package is used to adjust the slides positioning during screen resizing, preventing visual bugs.

Example

import React from 'react'
import Slider from '@fil1pe/react-slider'
import '@fil1pe/react-slider/style.css'

function App() {
  return (
    <SliderProvider>
      <Slider slidesToShow={2} slidesToScroll={1} className="slider">
        <div class="slide">1</div>
        <div class="slide">2</div>
        <div class="slide">3</div>
        <div class="slide">4</div>
        <div class="slide">5</div>
      </Slider>
    </SliderProvider>
  )
}

export default App