Vuetify Carousel Link Issue

### 🔍 1. **Carousel Slide Content Might Be Overlapping**
Sometimes the carousel items (`v-carousel-item`) may overlap each other due to CSS issues, making inner links not clickable.

**Fix**: Ensure each `v-carousel-item` has proper layout and no `z-index`/`positioning` issues.

### ✅ Example of a working Vuetify Carousel with link:

<template>
  <v-carousel>
    <v-carousel-item v-for="(item, i) in items" :key="i">
      <v-sheet
        height="100%"
        color="grey lighten-2"
        class="d-flex align-center justify-center flex-column"
      >
        <h2>{{ item.title }}</h2>
        <v-btn :href="item.link" target="_blank" color="primary">Visit</v-btn>
      </v-sheet>
    </v-carousel-item>
  </v-carousel>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { title: 'Slide 1', link: 'https://example.com' },
        { title: 'Slide 2', link: 'https://vuetifyjs.com' },
      ],
    }
  },
}
</script>

—

### 🛠️ 2. **Carousel `v-img` with absolute positioning**
If you're using `v-img` as background and putting the link on top, you may need to make sure your text is **absolutely positioned above** the image.

**Fix:**

<v-carousel-item>
  <v-img src="https://picsum.photos/1024/480">
    <v-container class="fill-height d-flex align-center justify-center">
      <v-btn href="https://example.com" target="_blank" color="white">
        Click Me
      </v-btn>
    </v-container>
  </v-img>
</v-carousel-item>

Add `position: relative` if needed:

.v-carousel-item {
  position: relative;
}

—

### 🧪 3. **Wrapping link in `router-link` instead of `v-btn` or `a`**

If you're using Vue Router, make sure you're using `router-link` or `to` prop properly:

<v-btn :to="{ name: 'SomeRoute' }" color="primary">Go to Route</v-btn>

—

### 💡 Still not working?

– Is there a `pointer-events: none` CSS rule somewhere in your styles?
– Is the link covered by another element with higher `z-index`?
– Are you using `@click.stop` or `.prevent` modifiers that might be interfering?

—

If you can share a small snippet of your code, I can help pinpoint the issue more precisely. Want to drop a sample?

—

### ✅ Example:

<v-carousel hide-delimiters>
  <v-carousel-item v-for="(item, i) in items" :key="i">
    <v-sheet class="d-flex align-center justify-center" height="300">
      <h2>{{ item }}</h2>
    </v-sheet>
  </v-carousel-item>
</v-carousel>

—

### 🧠 Explanation:
– `hide-delimiters`: This prop hides the **dot pagination indicators** at the bottom of the carousel.

—

If you also want to **hide arrows**, you can add:

<v-carousel hide-delimiters hide-delimiter-background show-arrows="false">

Let me know if you want to **custom-style the pagination dots** instead of hiding them!