Hello Sunil
react-marquee-logo-carousel-feature-image

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.

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

Organize your project as follows:

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

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;

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;

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:

react-marquee-logo-carousel-creation

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.

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!

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Similar articles you may like

Sunil Pradhan

Hi there 👋 I am a front-end developer passionate about cutting-edge, semantic, pixel-perfect design. Writing helps me to understand things better.

Add comment

Stay Updated

Want to be notified when our article is published? Enter your email address below to be the first to know.

Sunil Pradhan

Hi there 👋 I am a front-end developer passionate about cutting-edge, semantic, pixel-perfect design. Writing helps me to understand things better.