User avatar

Jeroen Reumkens PRO

Css carousel

Unlock Playground Access

Playgrounds let you build, test, and share frontend ideas instantly — right in your browser. Access is included in PRO. Just want Playgrounds? Pick a plan below.

Maker

€5,- / month

Unlimited Playgrounds access to build, experiment, and share without limits.

Join for €5 per month

Champion

€10,- / month

All the benefits of Maker, plus you help Frontend.fyi grow and get a Champion badge on your profile.

Join for €10 per month

Cancel anytime — no commitment.
Upgrade to PRO anytime and get a partial refund.We'll credit 100% of your first 3 months and 50% of the rest toward the PRO lifetime price.

Already a member? Login

Playground settings

Title

Description

Public

Editor settings


Packages

These packages can be imported in your JavaScript files.

Package name

Version

@

@

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
/**
// Credits for the pictures:
// https://unsplash.com/photos/assorted-candies-and-chocolate-pack-VklmASEqBvQ
// https://unsplash.com/photos/assorted-color-abstract-painting-tZc3vjPCk-Q
// https://unsplash.com/photos/person-using-marshall-headphones-jmZ6QjvJjvk
 */

export const App = () => {
  return (
    <div>
      <div className="slider-container">
        <Slide imageSrc="https://sandpack.frontend.fyi/img/css-grid-animation/candy.webp" />
        <Slide imageSrc="https://sandpack.frontend.fyi/img/css-grid-animation/sketch.webp" />
        <Slide imageSrc="https://sandpack.frontend.fyi/img/css-grid-animation/agency.webp" />
      </div>
    </div>
  );
};

type SlideProps = {
  imageSrc: string;
};

const Slide = ({ imageSrc }: SlideProps) => (
  <div className="slide">
    <img src={imageSrc} />
    <a href="#">
      View case <ArrowRight />
    </a>
  </div>
);

const ArrowRight = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path d="M5 12h14" />
    <path d="m12 5 7 7-7 7" />
  </svg>
);
One sec — editor's thinking…