Let’s play around with Carousel marquee ✌️

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 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.

.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

• 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
• @LinkedIn

You can also find me on

• @Github
• @DEV