How to build a Slider in React

Create a configurable and reusable slider component using slick

Motivation

Using a slider is one of the most popular ways to display multiple images or multiple sections of information in your web application. This visual candy is so popular it’s hard to find a site without one. Because of this, there are many great React Libraries available for creating a slider.

What to look for in libraries

When I am building a user interface I don’t like reinventing the wheel.
The great thing about software development is open source and code sharing. If you are about the develop something there is a 99% chance, if it is a common problem, that there is a great solution out there already.
Looking for a slider library I found react-slick.
From personal experience I have found that the most important factors are:

1. License (MIT License)
2. Amount of users (138 000) > 50k
3. Amount of contributers (130) > 10
4. Last change timestamp (6 days ago) ≤ 3 months ago

Using react-slick

In order to use the library we need to first install it:

npm install react-slick slick-carousel --save

Then you can simply use the Slider Component in your components by importing it.

import Slider from ‘react-slick’;

I recommend to create your own slider component and import the slick slider.
This way you are more flexible as to exchange the library at some point if needed and also you can define shared functionality for all sliders across your entire project.
What I did was to add a state for the active slide in order to allow for custom styling. This is only possible because I have made it a separate component. Otherwise one would have to implement state management for every component that wants to use the slider.

//components/slider/slider.tsx
import React from "react";
import styled from "styled-components";
import { useState } from "react";
import Slider from "react-slick";
const Dot = styled.div`
  width: 15px;
  height: 15px;
  border: solid 3px #2c2c2c;
  background-color: transparent;
  border-radius: 100%;
  margin: 0px 5px;
`;
const UISlider = (props) => {
  const [activeSlideIndex, setActiveSlideIndex] = useState(0);
const sliderSettings = {
    dots: true,
    infinite: true,
    speed: 1000,
    slidesToShow: 1,
    autoplaySpeed: 10000,
    slidesToScroll: 1,
    autoplay: true,
    adaptiveHeight: true,
    nextArrow: <div />,
    prevArrow: <div />,
    appendDots: (dots) => (
      <div className="w-100">
        <ul className="list-unstyled d-flex flex-row justify-content-center align-items-center">
          {dots}
        </ul>
      </div>
    ),
    beforeChange(oldIndex, newIndex) {
      setActiveSlideIndex(newIndex);
    },
    customPaging: (slideIndex) => (
      <Dot key={slideIndex} active={slideIndex === activeSlideIndex}></Dot>
    ),
  };
return (
    <div className="w-100">
      <Slider {...sliderSettings}>{props.children}</Slider>
    </div>
  );
};
export default UISlider;

Now all that is left is to call it and pass the children components.

<UISlider>
  <div>
    <span>Do you love apples?</span>
    <p>
      Apples are great.
    </p>
  </div>
  <div>
   <span>I love apples</span>
    <p>
      They are so tasty.
    </p>
  </div>
</UISlider>;

And here are some examples:

source:https://react-slick.neostack.com/

Using the right settings it is fully customizable and can meet most of the requirements you might have in your project.

Summary

I hope you enjoyed this article and learned how to use react-slick as a library for your own slider component in React.

Curious about more?

My newsletter is a burst of tech inspiration, problem-solving hacks, and entrepreneurial spirit.
Subscribe for your weekly dose of innovation and mind-freeing insights:
https://davidthetechie.substack.com/