https://github.com/manishsinghtomar/card-slider_in_react
https://github.com/manishsinghtomar/card-slider_in_react
react-slick react-slick-carousel reactjs tailwindcss
Last synced: 9 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/manishsinghtomar/card-slider_in_react
- Owner: manishsinghtomar
- Created: 2025-06-11T08:33:08.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-06-11T08:38:08.000Z (11 months ago)
- Last Synced: 2025-06-11T09:44:49.500Z (11 months ago)
- Topics: react-slick, react-slick-carousel, reactjs, tailwindcss
- Language: JavaScript
- Homepage: https://card-slider-in-react.vercel.app/
- Size: 6.15 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Slick
React slick is a carousel component built with React. It is a react port of slick carousel.
```ls
npm install react-slick --save
```
# Include CSS
You can include css required for this library in 2 ways
Install the slick-carousel package and import css in to your slider component
### npm
```ls
npm install slick-carousel --save
```
```css
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
```
or you can add cdn link in your html
```css
```
```jsx
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 (
1
2
3
4
5
6
);
}
```
## Step 1 - wrapping up cards code inside`` component.
## Step 2 - import react-slick libraries.
```jsx
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
```
```jsx
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 3,//how many slide you want show initially.
slidesToScroll: 1//on clicking on arrow button how many slide will scroll at a time
};
```