Posted on Jan 21, 2023

Let’s play around with Carousel marquee ✌️

#discuss #productivity #career

Today we will look at how we can create a carousel marquee view and customise it according to our requirements.

To experiment with the carousel view, we will

Create a new codesandbox project.
Select a React boiler plate template

and boo-ya the project would be created for you.

Now in the styles.css, update the code with the below CSS.

.App { font-family: sans-serif; text-align: center; } .wrapper { max-width: 100%; overflow-y: auto; } .marquee { white-space: nowrap; overflow: hidden; display: inline-block; animation: marquee 50s linear infinite; } .marquee p { display: inline-block; } .item { float: left; margin-right: 50px; margin-bottom: 50px; border: 1px solid; } .item:last-child { margin-right: 0; } @keyframes marquee { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }

Update your App.js file with the below code,

import "./styles.css"; export default function App() { const items = [ { name: "Test1", url: "https://upload.wikimedia.org/wikipedia/commons/1/11/Test-Logo.svg" }, { name: "Test2", url: "https://images.pling.com/img/00/00/48/70/84/1220648/e4fff450a6306e045f5c26801ce31c3efaeb.jpg" }, { name: "Test3", url: "https://upload.wikimedia.org/wikipedia/commons/8/85/Logo-Test.png" }, { name: "Test4", url: "https://static6.depositphotos.com/1014550/624/i/950/depositphotos_6240474-stock-photo-test-word-on-keyboard.jpg" }, { name: "Test5", url: "https://upload.wikimedia.org/wikipedia/commons/1/11/Test-Logo.svg" }, { name: "Test6", url: "https://images.pling.com/img/00/00/48/70/84/1220648/e4fff450a6306e045f5c26801ce31c3efaeb.jpg" }, { name: "Test7", url: "https://upload.wikimedia.org/wikipedia/commons/8/85/Logo-Test.png" }, { name: "Test8", url: "https://static6.depositphotos.com/1014550/624/i/950/depositphotos_6240474-stock-photo-test-word-on-keyboard.jpg" } ]; return ( <div className="App"> <h1>Caoursel marquee</h1> <div className="wrapper"> <div className="marquee"> {items.map(({ url, name }) => { return ( <div className="item" onClick={() => window.open(url, "_blank")} > <img src={url} width="100" height="100" alt={name}/> </div> ); })} </div> </div> </div> ); }