Как сделать частично видимые смежные элементы карусели

87
10

У меня есть карусель, он работает, но, как я понимаю, она прокручивает скриншоты и поэтому не могу позиционировать элементы, как в дизайне!

здесь есть описание изображения здесь должно быть так, введите описание изображения здесь

<v-ons-carousel fullscreen
swipeable
auto-scroll
overscrollable
:index.sync="carouselIndex"
class="carousel_main"
>
<v-ons-carousel-item class="carousel_item" v-for="(item, key) in items"
:key="key">
<v-ons-row vertical-align="center"
style="text-align: center;"
class="carousel_row">
<v-ons-col style="align-self: flex-end;" width="50%">
<img :src="item.img" alt="">
</v-ons-col>
<v-ons-col width="100%">
{{ item.title }}
<br>
<span">
{{ item.text }}
</span>
</v-ons-col>
</v-ons-row>
</v-ons-carousel-item>
</v-ons-carousel>

data() {
return {
carouselIndex: 0,
imgPhone,
imgHome,
imgPayList,
items: [
{
img: imgPhone,
title: 'Пополняйте счет на мобильном телефоне',
text: 'Пополняйте мобильный с минимальной комиссией',
},
{
img: imgHome,
title: 'Оплачивайте более 1000 услуг прямо с телефона',
text: 'Коммунальные платежи, интернет и ТВ, онлайн игры и многое другое',
},
{
img: imgPayList,
title: 'Создавайте шаблоны платежей',
text: 'Приложение автоматически будет оплачивать ваши услуги',
},
],

};
},

спросил(а) 2018-03-21T17:46:00+03:00 3 года назад
1
Решение
88

Карусель не предоставляет способ показать соседям, поэтому вы должны сделать это сами. Где у вас есть:

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

вам нужно будет что-то вроде

<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>

Вам, вероятно, придется обернуть три изображения в div, чтобы сделать их ряд, и стиль .neighbor с уменьшенной непрозрачностью и масштабированием.

ответил(а) 2018-03-21T18:06:00+03:00 3 года назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема