Let’s play around with Carousel marquee ✌️
Tags: javascript, react, webdev, learning
Published: 2023-01-21 02:09:57

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

1. Create a new [codesandbox](https://codesandbox.io/dashboard/recent) project.
2. 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.

```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,

```html
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](https://codesandbox.io/s/carousel-delay-l5yqzi?) on [codesandbox](https://codesandbox.io/)

## Credits
- https://stackoverflow.com/questions/45847392/pure-css-continuous-horizontal-text-scroll-without-break

Thanks in advance for reading this article...🚀

*I am more than happy to connect with you on*

- [@twitter](https://twitter.com/_nitinreddy3)
- [@LinkedIn](https://www.linkedin.com/in/nitinreddy3/)

*You can also find me on*

- [@Github](https://github.com/nitinreddy3)
- [@DEV](https://dev.to/nitinreddy3)