I am facing an issue with the layout of my simple swiper in my vue app. The containers are not inline as expected, causing the second one to appear under the first. Additionally, I am struggling with making the slider element visible only within the viewport of the swiper, indicated by a blue border.
My goal is to create a smooth and visually appealing slide show effect.
You can view my example here: https://jsfiddle.net/eywraw8t/547878/
Any suggestions on how I can resolve these issues?
<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>