sfp_front_nuxt_serprati_landing/app/components/EventCarousel.vue

<template>
  <div class="relative">
    <div
      ref="trackRef"
      class="carousel-track"
      @scroll.passive="onScroll"
    >
      <div
        v-for="photo in photos"
        :key="photo.id"
        class="carousel-slide"
      >
        <img
          :src="photo.url ?? ''"
          :alt="photo.name ?? 'Foto do evento'"
          class="carousel-img"
          loading="lazy"
        >
      </div>
    </div>

    <template v-if="photos.length > 1">
      <button
        type="button"
        class="carousel-nav left-2"
        aria-label="Foto anterior"
        @click="go(-1)"
      >
        <span class="material-icons text-xl">chevron_left</span>
      </button>
      <button
        type="button"
        class="carousel-nav right-2"
        aria-label="Próxima foto"
        @click="go(1)"
      >
        <span class="material-icons text-xl">chevron_right</span>
      </button>

      <div class="flex justify-center gap-2 mt-3">
        <button
          v-for="(photo, index) in photos"
          :key="photo.id"
          type="button"
          class="carousel-dot"
          :class="{ 'carousel-dot--active': index === activeIndex }"
          :aria-label="`Ir para a foto ${index + 1}`"
          @click="goTo(index)"
        />
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import type { EventMedia } from '~/composables/useEvents'

const { photos } = defineProps<{ photos: EventMedia[] }>()

const trackRef = ref<HTMLElement | null>(null)
const activeIndex = ref(0)

const onScroll = () => {
  const track = trackRef.value
  if (!track) return
  activeIndex.value = Math.round(track.scrollLeft / track.clientWidth)
}

const goTo = (index: number) => {
  const track = trackRef.value
  if (!track) return
  track.scrollTo({ left: index * track.clientWidth, behavior: 'smooth' })
}

const go = (step: number) => {
  const total = photos.length
  goTo((activeIndex.value + step + total) % total)
}
</script>

<style scoped>
.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 0.75rem;
}
.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.carousel-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

@media (min-width: 1024px) {
  .carousel-img {
    height: 280px;
  }
}

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.9);
  color: #661d75;
  box-shadow: 0 2px 10px rgba(102, 29, 117, 0.18);
  transition: background-color 0.2s;
  cursor: pointer;
}
.carousel-nav:hover {
  background-color: #ffffff;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: #d0b9d4;
  transition: background-color 0.2s, width 0.2s;
  cursor: pointer;
}

.carousel-dot--active {
  width: 20px;
  background-color: #661d75;
}
</style>