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>
);
}
So easy, right? You can find the project on codesandbox
Credits
Thanks in advance for reading this article...🚀
I am more than happy to connect with you on
You can also find me on
Top comments (0)