In this tutorial, we will learn how to create a card slider in React JS using the React Slick library. The card slider is a popular UI component that allows users to navigate through a series of cards or images in a slider format.
To get started, make sure you have React JS installed in your development environment. If not, you can install it by running the following command:
npx create-react-app card-slider-react-slickOnce you have created a new React project, navigate into the project directory by running:
cd card-slider-react-slickNext, we need to install the React Slick library. To do this, run the following command in your terminal:
npm install react-slick slick-carouselNow that we have installed the necessary libraries, let’s create a new component called CardSlider in the src directory. Here is an example of how the component should look:
import React from 'react';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
const CardSlider = () => {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
return (
<Slider {...settings}>
<div>
<h3>Card 1</h3>
</div>
<div>
<h3>Card 2</h3>
</div>
<div>
<h3>Card 3</h3>
</div>
</Slider>
);
};
export default CardSlider;In the code above, we import the Slider component from react-slick and define some settings for the slider. We then render a series of card components inside the slider.
Now, we need to import and use the CardSlider component in our App.js file. Here’s how you can do that:
import React from 'react';
import CardSlider from './CardSlider';
function App() {
return (
<div className="App">
<h1>Card Slider</h1>
<CardSlider />
</div>
);
}
export default App;Now, when you run npm start in your terminal and view your React app in the browser, you should see a simple card slider with three cards.
You can customize the settings object in the CardSlider component to adjust the behavior and appearance of the slider. For example, you can change the number of slides to show at a time, the speed of the slider, and whether or not to display navigation dots.
That’s it! You have successfully created a card slider in React JS using the React Slick library. Experiment with different settings and styles to create a card slider that best fits your project’s needs.
please could you explain in details about in the public folder in the students details
Hello please please reply me as soon as possible
I followed each and every step in this video and at the end the arrows was not there. Only I am able to scroll through dots.
Please tell me if there possibly mistake I made during this process..
And also I have not used tailwind classes to some elements. Instead I used external css. But its all working fine.. just want to know that how to display that arrows..
WOW! really you made it very easy… Thank you so much.
thank you
thanks a lot, u=your video is really time saving
Thankyou,This helped a lot! Subscribing rightaway!!
For mobile how it was going to look please one video on that please Mam
How can we change colour of the arrow bar
Error: Super expression must either be null or a function What is the reason for this error?
Thank you for sharingðŸ˜ðŸ˜ðŸ˜, God Bless you greatly & increase you,I have been battling with this for like 2 days now until I decided to search YT and found your video where u used react.
how do i change the button color mrs.etisha??
If u are using tailwind, use this to make it responsive:
const Services = () => {
var settings = {
accessibility:true,
dots: true,
infinite: true,
speed: 500,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1920,
settings: {
slidesToShow: 4,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 1536,
settings: {
slidesToShow: 4,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 1280,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 800,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
initialSlide: 1
}
},
{
breakpoint: 640,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
initialSlide: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
};
return (
};
<div className='m-10 sm:mx-10 md:mx-40 lg:mx-30 xl:mx-40 2xl:mx-60'>
<Slider {…settings}>
gracias <3
Well the slider looks really good, but for me the cards just take up the whole screen width, but even I want it in the center and also I am not able to see the left arrow, its almost like its not there
thank you very much
so helpful, thank you! Also, i love the way you pronounce carousel
how to add those images?
no link to the source no direct link to the git .. just waste of time
This was really helpful. I struggled with a few other libraries/tutorials but this one hit the mark and swiftly too! Great work 🙂
thank you for this video queen!