Vue Tailwind Carousel

VueTailwindCarousel.vue

/**
Based on the work of 
Adam Argile (https://github.com/argyleink)
Kevin Powell (https://github.com/kevin-powell)

Vue: 3.5.19
Tailwind: 4.1.12
**/

<script setup lang="ts">
defineProps<{ items: any[] }>();
</script>

<template>
  <ul class="carousel">
    <li v-for="(item, i) in items" :key="i" class="carousel-item">
      <slot name="item" :item />
    </li>
  </ul>
</template>

<style scoped>
@import "tailwindcss";
.carousel {
  @apply auto-cols-[90%] md:auto-cols-[40%] list-none m-0 p-4 grid;

  gap: 2rem;
  grid-auto-flow: column;
  grid-auto-columns: 100%;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  &::-webkit-scrollbar {
    display: none; /* Older Safari and Chromium */
  }

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }

  anchor-name: --carousel;

  scroll-marker-group: after;

  &::scroll-marker-group {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
  }

  > li {
    scroll-snap-align: center;

    &::scroll-marker {
      content: " ";
      width: 20px;
      height: 20px;
      aspect-ratio: 1 / 1;
      border-radius: 100%;
      border: 1px solid var(--color-primary-400);
    }

    &::scroll-marker:target-current {
      background: color-mix(in srgb, LinkText 20%, var(--color-primary-500) 7%);
    }
  }

  &::scroll-button(*) {
    position: fixed;
    position-anchor: --carousel;
    margin: 1rem;
    font: inherit;
    font-size: 3rem;
    color: color-mix(in srgb, canvasText 20%, var(--color-primary-500) 70%);
    border: none;
    background-color: transparent;
  }

  &::scroll-button(right) {
    content: "→";
    position-area: center right;
  }

  &::scroll-button(left) {
    content: "←";
    position-area: center left;
  }
}
</style>


# Usage