如何使轮播的部分可见相邻元素答案

【问题标题】：How to make partially visible adjacent elements of the carousel如何使轮播的部分可见相邻元素
【发布时间】：2018-03-21 14:46:12
【问题描述】：

我有一个旋转木马，它可以工作，但据我了解，她会滚动屏幕截图，所以我无法像设计中那样定位元素！

有 enter image description here 应该是这样 enter image description here

<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: 'Приложение автоматически будет оплачивать ваши услуги',
                    },
                ],

            };
        },

【问题讨论】：

标签： javascript css vue.js onsen-ui

【解决方案1】：

轮播不提供向邻居展示的方式，因此您必须自己动手。你在哪里：

<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 的样式。

【讨论】：