I'm trying to build a front page using the v-carousel and would like to scroll to the next item instead of using arrows or delimiters, how would I achieve that?
Here is my code at the moment
<template>
<v-carousel vertical-delimiters
:vertical="true"
:cycle="true"
height="100%"
>
<v-carousel-item >
<v-sheet
color="black"
height="100%"
tile
>
<v-container
fill-height
fluid
>
<v-row
align="center"
justify="center"
dense
class ="ma-0"
>
<v-col
align="center"
justify="center"
>
<v-img src="imagepath"
max-height="350"
max-width="350"
class="ma-10"
>
</v-img>
<div class="text-h4 pa-7">
Some text
</div>
</v-col>
</v-row>
</v-container>
</v-sheet>
</v-carousel-item>
<v-carousel-item>
<v-sheet
color="black"
height="100%"
tile
>
<v-container
fill-height
fluid
>
<v-row
align="center"
justify="center"
dense
class ="ma-0"
>
<v-col
align="center"
justify="center"
>
<v-img src="Image Path"
max-height="350"
max-width="350"
class="ma-10"
>
</v-img>
<div class="text-h4 pa-7">
Some text
</div>
</v-col>
</v-row>
</v-container>
</v-sheet>
</v-carousel-item>
</v-carousel>
</template>
The carousel works just fine, but I can't find a way to send scroll event to the carousel as a an event to move to the next item.
I think you could wrap your carousel into Intersection observer so you could observe the scroll event and after that, you will be able to call the function which can handle the carousel.
e.g. you have to provide a v-model for the <v-carousel> then after tracking the scroll event you can increase or decrease the amount of that v-model.
Another way could be the use of scroll directive. The v-scroll directive allows you to provide callbacks when the window, specified target, or the element itself (with .self modifier) is scrolled.