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 newcodesandbox 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:marquee50slinearinfinite;}.marqueep{display:inline-block;}.item{float:left;margin-right:50px;margin-bottom:50px;border:1pxsolid;}.item:last-child{margin-right:0;}@keyframesmarquee{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 (<divclassName="App"><h1>Caoursel marquee</h1><divclassName="wrapper"><divclassName="marquee">          {items.map(({ url, name }) => {            return (<divclassName="item"onClick={()=> window.open(url, "_blank")}              ><imgsrc={url}width="100"height="100"alt={name}/></div>            );          })}</div></div></div>  );}