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 installInstall the react-fast-marquee library:
npm i react-fast-marqueeInstall styled-components for easy styling:
npm i styled-componentsProject Structure
Organize your project as follows:
marquee-logo-carousel/
|-- src/
| |-- components/
| | |-- LogoCarousel.jsx
| |-- images/
| | |-- (your logo images here)
| |-- App.jsx
|-- public/
|-- index.htmlCreating 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!
Add comment