Carousel Slider in React using react-slick
Today we’ll show you how to implement a carousel slider in react using react-slick. It’s very easy to implement in a react project. As we are using the react-slick npm package to create a responsive carousel slider that you can use as a product slider or full screen banner slider as well.
In this article, we will show you how to configure a responsive slider for div based content or just images. Basically we are using the NPM package and the custom CSS to design the slider.
Steps to implement carousel slider
- Create react application
- Install npm packages for slider
- Implement carousel slider
- Enable center mode
- Output
1. Create react application
To begin the example, let’s create a sample react application where we can implement a responsive carousel slider.
Refer to the link: Create React Application
2. Install npm packages for slider
In the second step, we have to install the react-slick npm package to add a slider in react application.
Run the following command to install package.
1 | npm i react-slick |
Also we need to install the dependency for css and fonts.
1 | npm i slick-carousel |
3. Implement carousel slider
First, we have to import the react-slick and css by adding the following code.
1 2 3 4 5 | import Slider from "react-slick"; // Import css files import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; |
Now we need to use some configuration for the slider. It’s optional, if you want then you can ignore it for a full screen slider.
1 2 3 4 5 6 7 | const config = { dots: true, infinite: true, speed: 500, slidesToShow: 3, slidesToScroll: 1 }; |
Check out here for more information about the slider configuration.
Let’s use the products array for example to display as a card in a slider.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | const products = [ { img: '/images/product1.jpg', title: 'Dolore magna', text: 'Lorem ipsum dolor sit amet elit.' }, { img: '/images/product2.jpg', title: 'Eget est lorem', text: 'Lorem Ipsum adipiscing elit ipsum.' }, { img: '/images/product3.jpg', title: 'Tempus imperdiet', text: 'Orci porta non pulvinar neque laoreet.' }, { img: '/images/product4.jpg', title: 'Mattis rhoncus', text: 'Bibendum neque egestas congue quisque.' }, { img: '/images/product5.jpg', title: 'Odio ut enim', text: 'Mattis rhoncus urna neque viverra justo.' } ] |
Use the below HTML to render a slider with the help of the products array.
1 2 3 4 5 6 7 8 9 10 11 | <slider {...config}> {products.map((x, i) => { return <div key="{i}" classname="img-card"> <img classname="img" src="{x.img}"> <div class="card-body"> <div classname="card-title">{x.title}</div> <div classname="card-text">{x.text}</div> </div> </div> })} </slider> |
To design a product card use below css.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #ddd; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } .App { width: 800px; margin: 30px; } .cb-centermode { margin-bottom: 20px; display: block; } .cb-centermode input { margin-right: 7px; } /* card style start */ .img-card { border-radius: 4px; background: #f5f5f5; color: #666; overflow: hidden; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2); transition: 0.3s; } .img-card:hover { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); } .img { width: 100%; height: 200px; object-fit: cover; } .card-body { padding: 15px; } .card-title { font-size: 20px; font-weight: 600; } .card-text { margin-top: 10px; } /* card style end */ /* carousel slider style start */ .slick-slide > div { margin: 0 10px; } .slick-list { margin: 0 -10px; } .slick-slide *:focus{ outline: none; } /* carousel slider style end */ |
After successful configuration, you can see the below output in your browser.
4. Enable center mode
Here we are sharing the additional configuration that is known as center mode.
You have to add two more settings in your configuration to enable center mode.
1 2 3 4 5 6 7 8 9 | const config = { dots: true, infinite: true, speed: 500, slidesToShow: 3, slidesToScroll: 1, centerMode: true, // enable center mode centerPadding: '50px' // set center padding }; |
After updating the configuration, your output should look like below.
5. Output
So at last, we will implement the above both configurations in single file using React Hooks and also we will use a checkbox field that helps us to switch between two settings.
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | import React, { useState } from 'react'; import Slider from "react-slick"; // Import css files import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; function App() { const config = { dots: true, infinite: true, speed: 500, slidesToShow: 3, slidesToScroll: 1 }; const [settings, setSettings] = useState(config); const products = [ { img: '/images/product1.jpg', title: 'Dolore magna', text: 'Lorem ipsum dolor sit amet elit.' }, { img: '/images/product2.jpg', title: 'Eget est lorem', text: 'Lorem Ipsum adipiscing elit ipsum.' }, { img: '/images/product3.jpg', title: 'Tempus imperdiet', text: 'Orci porta non pulvinar neque laoreet.' }, { img: '/images/product4.jpg', title: 'Mattis rhoncus', text: 'Bibendum neque egestas congue quisque.' }, { img: '/images/product5.jpg', title: 'Odio ut enim', text: 'Mattis rhoncus urna neque viverra justo.' } ] const onChangeCenterMode = e => { if (e.target.checked) { setSettings({ ...config, centerMode: true, centerPadding: '50px' }); } else { setSettings(config); } } return ( <div classname="App"> <h3>Carousel Slider in React - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3> <label classname="cb-centermode"> <input type="checkbox" checked="{settings.centerMode}" onchange="{onChangeCenterMode}"> <span>Enable Center Mode</span> </label> <slider {...settings}> {products.map((x, i) => { return <div key="{i}" classname="img-card"> <img classname="img" src="{x.img}"> <div class="card-body"> <div classname="card-title">{x.title}</div> <div classname="card-text">{x.text}</div> </div> </div> })} </slider> </div> ); } export default App; |
Run the project and check out the output in the browser.
That’s it for today.
Thank you for reading. Happy Coding..!!
thanks u sir for this valuable guidance
My pleasure,
Subscribe us for weekly updates or like and follow us for regular updates.
i found this article super helpful but could’t help but notice there are some typos in the code
Hi Justin,
We have fixed the syntax error but you will also find the source code via the GitHub repo and that we have tested.