Carousel

Source

• Carousel.css
• Carousel.js

Example CSS

@import "winduum/src/components/carousel/content.css" layer(utilities);
@import "winduum/src/components/carousel/default.css" layer(utilities);

/* Example customization */
@layer utilities {
  .x-carousel.is-compact {
    padding: 0.5rem;
  }
}

Winduum CSS Code

winduum/src/components/carousel/content.css

.x-carousel-content {
  display: flex;
  overflow: auto;
  user-select: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  position: relative;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;

  &::-webkit-scrollbar {
    display: none;
  }

  & > :where(*) {
    flex: 0 0 auto;
    scroll-snap-align: start;

    &:last-child {
      scroll-snap-align: end;
    }
  }

  /* TODO grabbing */
  &:is(.grabbing) {
    &, & * {
      cursor: grabbing;
    }

    & a {
      pointer-events: none;
    }
  }
}

winduum/src/components/carousel/default.css

.x-carousel {
  inline-size: 100%;
}

Stimulus Actions