slick-slider-react

Slick Slider React

Horizontal Items Slider for React

Basic Usage

import Slider from "slick-slider-react"

function App() {
  const [index, setIndex] = useState(0)
  return (
    <Slider index={index} onSlide={setIndex}>
      <div className="w-[200px] h-[100px]">1</div>
      <div className="w-[200px] h-[100px]">2</div>
      <div className="w-[200px] h-[100px]">3</div>
      <div className="w-[200px] h-[100px]">4</div>
    </Slider>
  )
}

Slider Options

Following options can be provided to the <Slider> component to change it’s default configuration.

index, onSlide and children are required.

Option	Type	Default	Description
index	`number`		Current slide index
onSlide	`method`		Slide index change callback
children	`JSX.Element[]`		All child elements
alignment	`left` `center` `right`	`center`	Alignment of the items when they snap
snap	`boolean`	`true`	Slider will snap to closest item or otherwise slider will stay same after dragging
snapDuration	`number`	`400`	Animation duration when slider snaps to closest item
snapOutbound	`boolean`	`false`	Slider will snap according to alignment even for items in the corners
draggable	`boolean`	`true`	User will be able to drag the slider or otherwise slider will only snap by index change
dragCallback	`boolean`	`true`	Slide index will callback out of the component while user dragging the slider
dragOutbound	`boolean` `number`	`true`	User will be able to drag slider to out of container by this amount
dragFactor	`number`	`30`	Adjust the acceleration of snap items after dragging
className	`string`		Custom class name for slider container

Slider Items Gaps and Side Gaps

Slider component is a flex element. Therefore, providing a CSS flex gap using any custom className to the component options is enough to make space between each items. Also use padding in x direction to make space in left and right sides.

Look at the following syntax written in tailwind CSS.

<Slider className="gap-4 px-4">
  ...
</Slider>

Switch to No-Slider Mode

If you need to make the slider items appear as normal list of elements without sliding effect, you can put no-slider as the css-content on slider style using css @media rule. This rule will be checked when window resizes.

Look at the following syntax written in tailwind CSS.

<Slider className="lg:content-['no-slider']">
  ...
</Slider>

Developed by Deshan Nawanjana