@fil1pe/react-slider

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

Class name	Description
.main	div wrapping the track and arrows
.arrow	prev/next button
.disabled	if arrow is disabled
.track	wraps the ul containing the slides
.dots	ul with the dots
.active	active slide/dot
.pages	pagination info

Component props

Property	Default value	Required	Description
className	none	false	Class name of your slider component wrapper
slidesToShow	1	false	Number of slides per page
slidesToScroll	slidesToShow	false	Number of slides to scroll on click on prev/next
finite	false	false	Defines whether the slider should have finite scrolling or not
slidableWithMouse	false	false	Defines whether it can be slid with the mouse
renderArrow	(props, type) => <button {...props}>{type === ArrowType.Next ? 'Next' : 'Previous'}</button>	false	Allows customizing the arrow buttons
renderController	none	false	Function that renders additional controllers in the wrapper div .main (e.g. full-screen button). Receives the current slide index as argument
autoplayTimeout	none (∞)	false	Autoplay interval in milliseconds
slidesToAppend	none	false	Additional number of slides to append before and after
adaptiveHeight	false	false	Variable height
pagination	0	false	Shows current slide index alongside the total number of slides (1 for no spacing, 2 otherwise)
onSlideChange(int)	none	false	Function triggered on slide change
initialSlide	0	false	Number of the first slide to show

Methods

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

Method	Arguments	Description
slickGoTo	slide index	Navigates to the specified slide
slickNext	none	Goes to the next slide
slickPrev	none	Goes to the previous slide

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