Building a Marquee Logo Carousel with React Fast Marquee

In this blog, we’ll dive into creating a visually appealing marquee logo carousel using the react-fast-marquee library in a React application.

A marquee carousel is a great way to display a continuous, smooth-scrolling list of logos, often used on websites to showcase partners or sponsors.

Setting Up Your React Project

To get started, we need a React project. For this tutorial, we’ll use Vite as our React scaffolding tool because it provides a fast development environment.

Create a new Vite project:

npm create vite@latest marquee-logo-carousel --template react
cd marquee-logo-carousel
npm install

Install the react-fast-marquee library:

npm i react-fast-marquee

Install styled-components for easy styling:

npm i styled-components

Project Structure

Organize your project as follows:

marquee-logo-carousel/
|-- src/
|   |-- components/
|   |   |-- LogoCarousel.jsx
|   |-- images/
|   |   |-- (your logo images here)
|   |-- App.jsx
|-- public/
|-- index.html

Creating the Logo Carousel Component

In src/components/LogoCarousel.jsx, we will define our marquee carousel component.

LogoCarousel.jsx

// Imports Library
import React from "react";
import styled from "styled-components";
import Marquee from "react-fast-marquee";

// Imports Images
import Adani from "./images/Adani.svg";
import AgroservisTomsk from "./images/AgroservisTomsk.svg";
import AirCanada from "./images/AirCanada.svg";
import Alipay from "./images/Alipay.svg";
import DataCooler from "./images/DataCooler.svg";
import Gulf from "./images/Gulf.svg";
import GulfAir from "./images/GulfAir.svg";
import Honda from "./images/Honda.svg";
import LarsenDigital from "./images/LarsenDigital.svg";
import Maytag from "./images/Maytag.svg";
import Monarch from "./images/Monarch.svg";
import TomskEnergo from "./images/TomskEnergo.svg";

// CSS-in-JS
const MainWrapper = styled.section`
  position: relative;
  max-width: 100%;
  overflow: hidden;
  margin-bottom: 30px;
`;

const LogoStrip = styled.div`
  display: flex;
  gap: 15px;
`;

const RoundLogoWrapper = styled.div`
  position: relative;
  height: 4rem;
  margin: 0px 1rem;
  bottom: 0px;
`;

const SquareLogoWrapper = styled.div`
  position: relative;
  height: 4rem;
  margin: 0px 1rem;
  bottom: 0px;
`;

const LogoImg = styled.img`
  height: 100%;
  max-width: 128px;
`;

const LogoCarousel = () => {
  return (
    <>
      <Marquee
        autoFill={true}
        play={true}
        pauseOnHover={true}
        pauseOnClick={true}
        direction="right"
        speed={15}
        //delay={2}
        loop={0} //infinite
        gradient={true}
        gradientColor="white"
        gradientWidth={300}
      >
        <MainWrapper>
          <LogoStrip>
            <SquareLogoWrapper>
              <LogoImg src={Adani} />
            </SquareLogoWrapper>
            <RoundLogoWrapper>
              <LogoImg src={AgroservisTomsk} />
            </RoundLogoWrapper>
            <SquareLogoWrapper>
              <LogoImg src={AirCanada} />
            </SquareLogoWrapper>
            <RoundLogoWrapper>
              <LogoImg src={Alipay} />
            </RoundLogoWrapper>
            <SquareLogoWrapper>
              <LogoImg src={DataCooler} />
            </SquareLogoWrapper>
            <RoundLogoWrapper style={{ height: "3.2rem", top: "7px" }}>
              <LogoImg src={Gulf} />
            </RoundLogoWrapper>
            <SquareLogoWrapper style={{ height: "3.2rem", top: "1px" }}>
              <LogoImg src={GulfAir} />
            </SquareLogoWrapper>
            <RoundLogoWrapper style={{ height: "3.2rem", top: "2px" }}>
              <LogoImg src={Honda} />
            </RoundLogoWrapper>
            <SquareLogoWrapper>
              <LogoImg src={LarsenDigital} />
            </SquareLogoWrapper>
            <RoundLogoWrapper style={{ height: "3.2rem", top: "2px" }}>
              <LogoImg src={Maytag} />
            </RoundLogoWrapper>
            <SquareLogoWrapper>
              <LogoImg src={Monarch} />
            </SquareLogoWrapper>
          </LogoStrip>
        </MainWrapper>
      </Marquee>

      <Marquee
        autoFill={true}
        play={true}
        pauseOnHover={true}
        pauseOnClick={true}
        direction="left"
        speed={15}
        //delay={2}
        loop={0} //infinite
        gradient={true}
        gradientColor="white"
        gradientWidth={300}
      >
        <MainWrapper>
          <LogoStrip>
            <SquareLogoWrapper>
              <LogoImg src={TomskEnergo} />
            </SquareLogoWrapper>
            <RoundLogoWrapper>
              <LogoImg src={AgroservisTomsk} />
            </RoundLogoWrapper>
            <SquareLogoWrapper>
              <LogoImg src={AirCanada} />
            </SquareLogoWrapper>
            <RoundLogoWrapper>
              <LogoImg src={Alipay} />
            </RoundLogoWrapper>
            <SquareLogoWrapper>
              <LogoImg src={DataCooler} />
            </SquareLogoWrapper>
            <RoundLogoWrapper style={{ height: "3.2rem", top: "7px" }}>
              <LogoImg src={Gulf} />
            </RoundLogoWrapper>
            <SquareLogoWrapper style={{ height: "3.2rem", top: "1px" }}>
              <LogoImg src={GulfAir} />
            </SquareLogoWrapper>
            <RoundLogoWrapper style={{ height: "3.2rem", top: "2px" }}>
              <LogoImg src={Honda} />
            </RoundLogoWrapper>
            <SquareLogoWrapper>
              <LogoImg src={LarsenDigital} />
            </SquareLogoWrapper>
            <RoundLogoWrapper style={{ height: "3.2rem", top: "2px" }}>
              <LogoImg src={Maytag} />
            </RoundLogoWrapper>
            <SquareLogoWrapper>
              <LogoImg src={Monarch} />
            </SquareLogoWrapper>
          </LogoStrip>
        </MainWrapper>
      </Marquee>
    </>
  );
};

export default LogoCarousel;

Integrating the Carousel into Your App

In src/App.jsx, we’ll import and use the LogoCarousel component.

App.jsx

;import LogoCarousel from "./components/LogoCarousel";

function App() {
  return (
    <>
      <h1
        style={{
          textAlign: "center",
          marginBottom: "100px",
          marginTop: "50px",
        }}
      >
        Marquee Logo Carousel
      </h1>

      <LogoCarousel />
    </>
  );
}

export default App;

Styling the Carousel

We’ve used styled-components to handle the styling directly within the component. The key styles are:

MainWrapper: A section that wraps the whole marquee area.
LogoStrip: A flex container that holds all the logos in a horizontal row.
LogoWrapper: A container for each logo, allowing for uniform spacing and sizing.
LogoImg: Ensures each logo fits nicely within its container.

Output:

Customizing the Carousel

The react-fast-marquee component offers several props for customization:

direction: Sets the scroll direction (left or right).
speed: Controls the scroll speed.
gradient: Adds a fading gradient to the edges.
pauseOnHover and pauseOnClick: Pauses the scroll when the user hovers over or clicks on the carousel.

Conclusion

With just a few lines of code and the react-fast-marquee library, we’ve created a dynamic and stylish marquee logo carousel. This component is easy to customize and integrate into any React project. Happy coding!