CodePen Embed - css-carrousel

<section class="carousel">
  <img src='https://images.unsplash.com/photo-1714572877812-7b416fbd4314?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NTExMTJ8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <img src='https://images.unsplash.com/photo-1531603845872-e4a07041f521?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NTExMzR8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <img src='https://images.unsplash.com/photo-1552452380-4137214f33b6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NTExMzR8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <img src='https://images.unsplash.com/photo-1597071622990-3a4ed91035b0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NTExMzR8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <img src='https://images.unsplash.com/photo-1508325732378-00eafff6c504?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NTExODh8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <img src='https://images.unsplash.com/photo-1578995296899-f5e717c934b0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NTExODh8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
</section>

.carousel {
  display: flex;
  height: var(--carousel-height, 25rem);
  width: var(--carousel-width, 45rem);
  border-radius: var(--carousel-radius, 1rem);
  position: relative;
  scroll-snap-type: x mandatory;
  overflow: auto hidden;
  
  & > img {
    flex: 0 0 100%;
    height: var(--img-height, 100%);
    object-fit: cover;
    position: sticky;
    left: 0;
    scroll-snap-align: start;
  }
}

This Pen is owned by julian cordoba on CodePen.

See more by @omega5300 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.