Creating a Logo Slider Using React-Slick

Displaying logos of partners, sponsors, or featured companies is common practice on websites, especially on e-commerce platforms and corporate websites. One interesting and interactive way to display these logos is by using a logo slider.

In this article, we will use the react-slick library, which is a React carousel component, to create a logo slider.

Setting up

Firstly, make sure to install the required libraries by running the following commands in your terminal:

npm install react-slick slick-carousel

npm install slick-carousel --save

React slick also needs slick’s CSS and optionally, slick-theme’s CSS, so don’t forget to import them in your component:

import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";

Creating the Slider Component

Now, we are ready to create our Slider component. We will use useState to set our slider settings:

import React, { useState } from 'react';
import Slider from 'react-slick';

const LogoSlider = () => {
  const [settings] = useState({
    dots: true,
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    speed: 2000,
    autoplaySpeed: 2000,
    cssEase: 'linear',
  });
  // Your component logic
  return (
    <div>
      <h2>Proudly Supported by</h2>
      <Slider {...settings}>
        {/* Your logos here */}
      </Slider>
    </div>
  );
};
export default LogoSlider;

In our settings, we have defined that the slider will display three items at a time (slidesToShow), move one item per scroll (slidesToScroll), and autoplay with a speed of 2000ms. It will also loop indefinitely (infinite: true).

Adding Logos

Let’s add some logos into our slider. Instead of hardcoding each logo, we can create an array of logo URLs and use the .map() function to generate the logos dynamically:

const LogoSlider = () => {
  // ... settings and other stuff

  const logos = [
    'http://path.to/logo1.jpg',
    'http://path.to/logo2.jpg',
    'http://path.to/logo3.jpg',
    // Add more logos here
  ];
  return (
    <div>
      <h2>Proudly Supported by</h2>
      <Slider {...settings}>
        {logos.map((logo, index) => (
          <div key={index} className="container">
            <img src={logo} alt='logo'} />
          </div>
        ))}
      </Slider>
    </div>
  );
};
export default LogoSlider;

In the example above, the .map() function is used to iterate over the logos array. It creates a new <div> containing an <img> for each logo, with the src attribute set to the current logo URL. The alt attribute is set for accessibility and SEO purposes.

CODE SNIPPET

Screenshot of how the logos are displayed on the browser

That’s it! You’ve successfully created a logo slider using React and react-slick. This pattern isn’t limited to logos — you can use it to create sliders for various types of content by changing the items in the array.

Remember to customize the settings to fit your needs and feel free to add your own styles to make the slider match your site’s look and feel. React-slick comes with a multitude of options for customization, so explore the official documentation to learn more.

Happy coding.