Table of contents
Carousels are a popular component in web development, offering an interactive and visually appealing way to display content. Several libraries can be used for the creation of carousels with ease, and one of such libraries is React Slick. In this article, we will explore the steps to build a carousel slider using React Slick.
What is React Slick?
React Slick is a responsive carousel slider built with React. It is a wrapper around the Slick carousel library and provides a set of components and options for creating dynamic and customizable carousels in React applications. Its simplicity and flexibility make it a popular choice for developers looking to incorporate carousels into their projects.
Prerequisites
Before diving into the implementation, ensure that you have a React project set up. You can create one using Vite, a frontend build tool for faster development with features like hot module replacement.
npm create vite@latest react-slick-carousel -- --template react
cd react-slick-carousel
Next, install the React Slick library and slick carousel for CSS and font.
npm install react-slick –save
npm install slick-carousel
Implementing the Carousel
Now, let's create a simple React component that uses React Slick to display a carousel slider using the steps that will be discussed below.
1. Import the Required Dependencies
Three important dependencies must be imported into the carousel component, otherwise, React Slick won’t be effective.
// src/components/CarouselSlider.jsx
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
The first import statement imports the Slider component from the react-slick library. The react-slick library provides a carousel slider component for React applications.
The remaining import statements are for importing the default styles of the Slick carousel component. The second import statement is for the base styles, and the third is for the theme styles. These styles define the appearance and behavior of the carousel.
2. Create a Storage file for Images and Info.
A storage file is created as an alternative to an online server, from which data can be retrieved.
// src/components/Data.jsx
export const BestNovels = [
{
id: 1,
Author: 'Ayobami Adebayo',
Title: "A Spell of Good Things",
price: '$19.99',
Genre: 'Domestic Fiction',
linkImg:
'https://ouidabooks.com/wp-content/uploads/2023/01/A-Spell-of-Good-Things-cover.jpeg'
},
{
id: 2,
Author: "chika Unigwe",
Title: 'The Middle Daughter',
price: '$20.99',
Genre: 'Literary Fiction',
linkImg:
'https://rhbooks.com.ng/wp-content/uploads/2023/05/Untitled-design-3-1.png'
},
{
id: 3,
Author: "Leila Aboulela",
Title: 'River Spirit',
price: '$29.99',
Genre: 'Historical Fiction',
linkImg:
'https://opencountrymag.com/wp-content/uploads/2023/02/Leila-Aboulela-RIVER-SPIRIT.jpg'
},
{
id: 4,
Author: 'Paul Murray',
Title: 'The Bee Sting',
price: '$29.99',
Genre: 'Literary Fiction',
linkImg:
'https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1674502938l/62039166.jpg'
},
{
id: 5,
Author: 'Zadie Smith',
Title: 'The Fraud',
price: '$25.99',
Genre: 'Historical Fiction',
linkImg:
'https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1677770042l/66086834.jpg'
},
{
id: 6,
Author: "Caleb Azuman Nelson",
Title: 'Small Worlds',
price: '$15.99',
Genre: 'Literary Fiction',
linkImg:
'https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1669130877i/59634120.jpg'
},
{
id: 7,
Author: 'Ali Hazelwood',
Title: 'Love, Theoretically',
price: '$29.99',
Genre: 'Romance Fiction',
linkImg:
'https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1681476644i/61326735.jpg'
},
{
id: 8,
Author: "Rebecca Yarros",
Title: 'Fourth Wing',
price: '$25.99',
Genre: 'Fantasy Fiction',
linkImg:
'https://www.storytel.com/images/640x640/0003759840.jpg'
},
]
In this Data.jsx file, we have an array named BestNovels, which will be exported into the carousel’s component. This array contains objects, each representing information about a novel, including its ID, author, title, price, genre, and a link to its cover image.
3. Create the Carousel Component
After creating the Data.jsx file and importing the dependencies, you can write the code to provide functionality for the carousel slider within the carousel component.
// src/components/CarouselSlider.jsx
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import './CarouselSlider.css';
//import BestNovels array from data file
import { BestNovels } from './Data';
//function to define the arrow components for slider navigation
function SampleNextArrow(props) {
const { className, style, onClick } = props;
return (
<div
className={className}
style={{ ...style, display: "block", background: "black", borderRadius: "50%" }}
onClick={onClick}
/>
);
}
function SamplePrevArrow(props) {
const { className, style, onClick } = props;
return (
<div
className={className}
style={{ ...style, display: "block", background: "black", borderRadius: "50%" }}
onClick={onClick}
/>
);
}
function CarouselSlider() {
//configuration settings for the slider
const settings = {
dots: true,
infinite: false,
speed: 500,
slidesToShow: 3,
slidesToScroll: 3,
nextArrow: <SampleNextArrow />,
prevArrow: <SamplePrevArrow />,
initialSlide: 0,
//Responsive settings for different screen sizes
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
infinite: true,
dots: true,
},
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
initialSlide: 2,
},
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
},
],
};
return (
<div className="carousel-slider">
<Slider {...settings}>
{BestNovels.map((novel) => (
<div className="card">
<div className="card-top">
<img src= {novel.linkImg} alt={novel.Title}/>
<h1>{novel.Author}</h1>
<h1>{novel.Title}</h1>
</div>
<div className="card-bottom">
<h3>{novel.price}</h3>
<span className="genre">{novel.Genre}</span>
</div>
</div>
))}
</Slider>
</div>
);
}
export default CarouselSlider;
The CarouselSlider component maps over the BestNovels array from the Data.jsx file and displays novel information within a Slider component. The Slider is configured with settings for responsiveness and custom arrow components. Each novel is displayed within a card, and the component is exported as the default export.
4. Styling and Customizing the carousel
To make a proper carousel slider, some styling must be done, which is why a CSS stylesheet must be created.
// src/components/CarouselSlider.css
body {
background: #ccc;
}
.carousel-slider {
width: 80%;
margin: 0 auto;
margin-top: 80px;
}
.slick-slide > div {
margin: 0 10px;
}
.slick-list {
margin: 0 -10px;
}
.card {
border: 1px solid #fff;
background: rgb(69, 62, 62);
border-radius: 8px;
overflow: hidden;
height: 400px;
color: #fff;
cursor: pointer;
}
.card-top h1 {
font-size: 0.9rem;
margin: 15px;
}
.card-top > img {
width: 100%;
height: 200px;
object-fit: cover;
background: black;
}
.card-bottom {
margin: 10px 20px;
}
.genre {
position: relative;
}
.genre::before {
content: '';
background: green;
position: absolute;
top: calc(100% + 10px);
left: 0;
right: 0;
height: 2px;
}
In this CarouselSlider.css file, the styles define the appearance of the carousel slider, individual cards, and their content. Adjustments such as colors, margins, and sizes are applied to create a visually appealing design, where the details of each novel are provided in the form of a card.
5. Integrate the Carousel Component
The carousel component has to be imported into the App component, so it can be displayed on the screen.
// src/App.js
import React from 'react';
import Carousel from './components/CarouselSlider';
function App() {
return (
<div className="App">
<h1>React Slick Carousel</h1>
<CarouselSlider />
</div>
);
}
export default App;
The App component renders the CarouselSlider component, which is responsible for displaying the carousel slider with information about each novel.
6. Run Your React App
To execute the Vite React app, you must enter a command.
npm run dev
Type the command above into your terminal and run it. It will lead you to a localhost address, which you can access in your browser, and you should see your React Slick carousel working perfectly.
Result:
Conclusion
Creating a carousel slider using React Slick is a straightforward process, thanks to the library's simplicity and flexibility. With just a few lines of code, you can integrate a responsive and customizable carousel into your React applications, enhancing the user experience with dynamic content presentation. Experiment with different settings and styles to achieve the desired look and feel for your project.