React Carousel Slider Tutorial for Beginners –

Creating a Carousel for your website can give a premium feel to your users and might increase the authenticity and overall conversions.
But, creating a carousel right from scratch using CSS & JavaScript can be a little bit of pain. So, today I’ll show you a really easy method to create a carousel. You can create a carousel in just a few lines of code and also make it responsive without adding extra CSS
Also, the best part is that you’ll be able to animate it with just one line of code.
So, let’s get started.
What we’ll create?
A Friends Carousel,
Create React App –
So, I assume that you might have created the React app from your terminal and deleted all the boilerplate code and the testing files. So, make sure you are a clean slate.
npx create-react-app my-app
//or
yarn create react-app my-app
Now, cd
to your app,
cd my-app
and run the app,
npm start
//or
yarn start
Ok, now I assume that you’re app might be running, so let us install some packages. We will be installing two packages, which will help us to create amazing react carousels in just a minute.
react-slick
react-carousel
npm install react-slick
//&
npm install react-carousel
now, import the package and add CSS files,
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
Create a settings
object and pass the options that you want for your carousel or slider.
const settings = {
dots: false,
lazyLoad: true,
infinite: true,
speed: 500,
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1500,
};
You can also make it responsive, by adding these options,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
infinite: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
initialSlide: 2
}
},
{
breakPoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
Now, add your images and here we are mapping out al the images from the data file, you can do the same instead of repeating the code.
export default function App() {
return (
<div className="App">
<h1>Awesome React Carousel Animation</h1>
<div className="carousel">
<Slider {...settings}>
{images.map((img) => (
<img alt="" src={img.img} key={img.key} />
))}
</Slider>
</div>
</div>
);
}
Complete Code,
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import "./styles.css";
import { images } from "./data";
export default function App() {
const settings = {
dots: false,
lazyLoad: true,
infinite: true,
speed: 500,
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1500,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
infinite: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
initialSlide: 2
}
},
{
breakPoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
};
return (
<div className="App">
<h1>Awesome React Carousel Animation</h1>
<div className="carousel">
<Slider {...settings}>
{images.map((img) => (
<img alt="" src={img.img} key={img.key} />
))}
</Slider>
</div>
</div>
);
}
Check the live version here.
I hope this post was helpful, if it was make sure to follow our Coding Master newsletter. Also, let us know if you want any tutorial on web development, we’ll be glad to help you.
- Frontegg: Best Auth System for your Frontend - September 27, 2022
- NextJS vs ReactJS: Which is the best for your project? - September 26, 2022
- 5 Amazing React libraries to make your App Stand Out! - July 28, 2022
0 Comments