Я использую ползунок vue flickity
, и у меня есть некоторые проблемы. Когда я хочу добавить ссылки на мои слайдеры, слайдер работает неправильно. Как это изображение:

Так как я могу решить проблему со ссылками?
Это мой код, MultipleSlider. vue:
<v-container>
<p class="display-1">آخرین محصولات</p>
<flickity ref="flickity" :options="flickityOptions1" class="">
<div>
<router-link>
<v-btn class="custombtn" text @click="alert('awd')">
<v-icon>mdi-cart-outline</v-icon>
خرید
</v-btn>
</router-link>
<img height="200" src="../assets/mainProducts/digital-video-camera-video-high_19-117521.jpg" alt="">
<p class="text-center">دوربین جدید با کیفیت HD</p>
</div>
<div>
<router-link>
<v-btn class="custombtn" text @click="alert('awd')">
<v-icon>mdi-cart-outline</v-icon>
خرید
</v-btn>
</router-link>
<img height="200" src="../assets/mainProducts/digital-video-camera-videography_19-117527.jpg"
alt="">
<p class="text-center">دوربین فیلم برداری با کیفیت 4K</p>
</div>
<div>
<router-link>
<v-btn class="custombtn" text @click="alert('awd')">
<v-icon>mdi-cart-outline</v-icon>
خرید
</v-btn>
</router-link>
<img height="200" src="../assets/mainProducts/measuring-tape-measure_19-132467.jpg" alt="">
<p class="text-center">متراژ 5 متری با کیفیت</p>
</div>
<div>
<router-link>
<v-btn class="custombtn" text @click="alert('awd')">
<v-icon>mdi-cart-outline</v-icon>
خرید
</v-btn>
</router-link>
<img height="200" src="../assets/mainProducts/sunglasses-background_19-132601.jpg" alt="">
<p class="text-center">عینک 3 بعدی و با کیفیت</p>
</div>
<div>
<router-link>
<v-btn class="custombtn" text @click="alert('awd')">
<v-icon>mdi-cart-outline</v-icon>
خرید
</v-btn>
</router-link>
<img height="200" src="../assets/mainProducts/digital-video-camera-video-high_19-117521.jpg" alt="">
<p class="text-center">دوربین جدید با کیفیت HD</p>
</div>
<div>
<router-link>
<v-btn class="custombtn" text @click="alert('awd')">
<v-icon>mdi-cart-outline</v-icon>
خرید
</v-btn>
</router-link>
<img height="200" src="../assets/mainProducts/digital-video-camera-videography_19-117527.jpg"
alt="">
<p class="text-center">دوربین فیلم برداری با کیفیت 4K</p>
</div>
<div>
<router-link>
<v-btn class="custombtn" text @click="alert('awd')">
<v-icon>mdi-cart-outline</v-icon>
خرید
</v-btn>
</router-link>
<img height="200" src="../assets/mainProducts/measuring-tape-measure_19-132467.jpg" alt="">
<p class="text-center">متراژ 5 متری با کیفیت</p>
</div>
<div>
<router-link>
<v-btn class="custombtn" text @click="alert('awd')">
<v-icon>mdi-cart-outline</v-icon>
خرید
</v-btn>
</router-link>
<img height="200" src="../assets/mainProducts/sunglasses-background_19-132601.jpg" alt="">
<p class="text-center">عینک 3 بعدی و با کیفیت</p>
</div>
</flickity>
</v-container>
</template>
<script>
import Flickity from 'vue-flickity';
export default {
components: {
Flickity
},
data() {
return {
flickityOptions1: {
initialIndex: 4,
prevNextButtons: true,
pageDots: false,
wrapAround: true,
groupCells: true,
// any options from Flickity can be used
},
}
},
}
</script>