Creating a carousel with ReactJS Slick
Generally, a carousel consists of a series of images. If you want to display several pieces of content in one space, carousels are a great option. To create a simple carousel, we would have to write a lot of complicated logic and CSS to display the items. Therefore, designing the carousel will require considerable effort and time. Fortunately, React Slick, an open-source carousel component library enables us to create a slide show of images quickly and easily.
Approach: By using the React Slick package, we will create an image slider. In the process, we will use a number of available props and methods.
Below is the step-by-step implementation.
Step 1: Create React app.
Make a new project directory and create react app named ” img-gallery ” by using the following command:
npx create-react-app img-gallery
After the img-gallery app is created, switch to the new folder img-gallery using the following command:
Step 2: After creating the React application, Install the react-slick package using the following command:
npm i react-slick
Step 3: Install the slick-carousel package by using the following command:
npm i slick-carousel
The slick carousel package contains the code for CSS and fonts.
Step 4: Modify your project structure. The Directory structure currently looks like this.
We will modify the folder and keep the files we need for this project.
Create the following files:
- images.js: to list out all the images we want to display in the slider
- imageSlider.js: to set up our carousel component
- style.css: for writing custom CSS.
Now, make sure your file structure looks like this
Step 5: Add code to your index.html file. Include the following code in your index.html file, located in the public folder of your project directory.
Step 6: Adding the images we want to display in the images.js file. Write the following code in the images.js file. You can use any image of your choice by writing the img url in the src field.
Step 7: Making the carousel component – “ImageSlider” inside the imageSlider.js file.
We will first import the react slick package into our imageSlider.js file. Import the default CSS code from the Slick Carousel package. Add custom styling in style.css.
import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css";
We will configure our carousel using the following inbuilt methods and properties:
- Infinite: The infinite property indicates an infinite scroll.
- The lazyLoad: Load components on demand.
- autoplay: autoplay our slideshow without any user interaction
- slidesToScroll: number of slides to scroll at once
- slideshow: number of slides to display in frame.
- dots: used for navigation.
You can customize your slider using various other props and methods. To render our desired images in the carousel, we will create a Slider component and pass it into our configurations. The Map function maps each image from the Image array. Add the following code to imageSlider.js.
Step 8: Adding custom styles .slick-slide img class is a CSS class defined in react-slick for styling the images of the component. Add the following code in the style.css file
Step 9: Passing the ImageSlider component in the root App component. Add the following code in the App.js file
Step 10: Your index.js file should look like this. The index.js file serves as the main entry point, and inside it, the App.js file is rendered at the root ID of the DOM.
The image carousel is ready.
Step to run the Application: Run the application by using the following command:
By default, the React project will run on port 3000. You can access it at localhost:3000 on your browser.