Контейнеры не встроены в мой Vue Swiper - PullRequest
Новая
       26

Контейнеры не встроены в мой Vue Swiper

0 голосов
/ 11 января 2019

Я написал простой swiper в моем приложении vue, но у меня проблема с контейнерами, которые не являются встроенными. Второй под первым. Вторая проблема заключается в том, что элемент слайдера должен быть видимым только в области просмотра swiper, но это не так (область просмотра имеет синий цвет).

Я хочу добиться эффектного беглого слайд-шоу.

Вы можете увидеть это в моем примере:

https://jsfiddle.net/eywraw8t/547878/

Как я могу это исправить? 

<template>
    <div class="swiper">
        <transition-group
            tag="div"
            class="slides-group"
            :name="transitionName"
        >
            <div :key="currentIndex" class="slide">
                <slot v-bind:element="current" />
            </div>
        </transition-group>
        <div class="pagination">
            <button @click="next">next</button>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        data: {
            type: Array,
            default: []
        }
    },
    data() {
        return {
            currentIndex: 0,
            transitionName: 'slide-next'
        }
    },
    computed: {
        current() {
            return this.data[this.currentIndex];
        }
    },
    methods: {
        next() {
            this.currentIndex++;
        }
    }
}
</script>
<style lang="scss" scoped>
.swiper {
    width: 100%;
    position: relative;
}
.slide-next-enter-active,
.slide-next-leave-active {
    transition: transform 0.5s ease-in-out;
}
.slide-next-enter {
    transform: translate(100%);
}
.slide-next-leave-to {
    transform: translate(-100%);
}
.slide-prev-enter-active,
.slide-prev-leave-active {
    transition: transform 0.5s ease-in-out;
}
.slide-prev-enter {
    transform: translate(-100%);
}
.slide-prev-leave-to {
    transform: translate(100%);
}
</style>

1 Ответ

0 голосов
/ 11 января 2019

Попробуйте следующие изменения CSS 1) к .swiper, добавьте: переполнение: скрытый; 2) к .slide добавьте: дисплей: встроенный блок;

Затем измените настройки перехода для эстетики. 

.swiper {
  margin-left: 100px;
  position: relative;
  border: 1px solid blue;
  overflow:hidden;
}

.slide {
  border: 1px solid red;
  width: 200px;
  height: 200px;
  display:inline-block;
}

Обратите внимание, что при использовании дисплея inline он может разбиться на несколько строк, если ширина строки превышает ширину контейнера. Возможно, вы захотите установить абсолютное отображение на них с фиксированными позициями и манипулировать этими позициями для достижения желаемого эффекта.

...