时间戳

首页 > 解决方案 > 容器在我的 Vue Swiper 中没有内联

html - 容器在我的 Vue Swiper 中没有内联

问题描述

我在我的 vue 应用程序中编写了简单swiper的内容，但我遇到了非内联容器的问题。第二个在第一个之下。第二个问题是滑块元素应该只在视口中可见，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>

标签： htmlcssanimationvue.jsslider

解决方案

尝试以下 CSS 更改 1) 到 .swiper，添加： overflow:hidden; 2）在.slide中，添加： display:inline-block；

然后，更改美学的过渡设置。

.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请注意，如果线宽超过容器宽度，使用显示器会导致它分成多行。您可能希望在它们上设置具有固定位置的绝对显示，并操纵这些位置以实现所需的效果。

推荐阅读