react-slick alternatives and similar libraries
Based on the "Carousel" category.
Alternatively, view react-slick alternatives based on common mentions on social networks and blogs.
-
nuka-carousel
Small, fast, and accessibility-first React carousel library with an easily customizable UI and behavior to fit your brand and site. -
react-awesome-slider
React content transition slider. Awesome Slider is a 60fps, light weight, performant component that renders an animated set of production ready UI general purpose sliders with fullpage transition support for NextJS and GatsbyJS. ๐ฅ๏ธ ๐ฑ -
pure-react-carousel
A highly impartial suite of React components that can be assembled by the consumer to create a carousel with almost no limits on DOM structure or CSS styles. If you're tired of fighting some other developer's CSS and DOM structure, this carousel is for you. -
react-multi-carousel ๐
A lightweight production-ready Carousel that rocks supports multiple items and server-side rendering with no dependency. Bundle size 2kb. -
react-id-swiper
A library to use idangerous Swiper as a ReactJs component which allows Swiper's modules custom build -
react-simply-carousel
A simple, lightweight, fully controlled isomorphic (with SSR support) React.js carousel component. Touch enabled and responsive. With support for autoplay and infinity options. Fully customizable -
#<Sawyer::Resource:0x00007f0920f20730>
Most modern mobile touch slider with hardware accelerated transitions for ReactJS
CodeRabbit: AI Code Reviews for Developers

* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of react-slick or a related project?
README
react-slick
Carousel component built with React. It is a react port of slick carousel
Documentation
Installation
npm
npm install react-slick --save
yarn
yarn add react-slick
Also install slick-carousel for css and font
npm install slick-carousel
// Import css files
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
or add cdn link in your html
<link
rel="stylesheet"
type="text/css"
charset="UTF-8"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
/>
PlayGround
Example
import React from "react";
import Slider from "react-slick";
export default function SimpleSlider() {
var settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
return (
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
);
}
Props
For all available props, go here.
Methods
For all available methods, go here
Development
Want to run demos locally
git clone https://github.com/akiran/react-slick
cd react-slick
npm install
npm start
open http://localhost:8080
Community
Join our discord channel to discuss react-slick bugs and ask for help
Contributing
Please see the [contributing guidelines](./CONTRIBUTING.md)