[Vuejs]-How to make partially visible adjacent elements of the carousel

by

0👍

The carousel does not provide a way to show neighbors, so you have to do it yourself. Where you have:

<v-ons-col style="align-self: flex-end;" width="50%">
   <img :src="item.img" alt="">
</v-ons-col>

you will need to have something like

<v-ons-col style="align-self: flex-end;" width="50%">
    <img v-if="key > 0" class="neighbor" :src="items[key-1].img">
    <img :src="item.img" alt="">
    <img v-if="key < items.length - 1" class="neighbor" :src="items[key + 1].img">
</v-ons-col>

You will probably need to wrap the three images in a div to make a row of them, and style .neighbor with a reduced opacity and scale.

Leave a comment