Containers are not inline in my Vue Swiper - html

Question

I have written simple swiper on in my vue app but I have a problem with containers which are not inline. The second is under the first one.
The second problem is that slider element should be visible only in viewport of swiper but it is not (viewport is border is blue).
I want to achieve a pretty effect of fluent slide show.
You can see it in my example:
https://jsfiddle.net/eywraw8t/547878/
How can I fix it?
<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>

Answer 1

Try the following CSS changes
1)
to .swiper, add:
overflow:hidden;
2)
to .slide, add:
display: inline-block;
Then, change your transition settings for aesthetics.
.swiper {
margin-left: 100px;
position: relative;
border: 1px solid blue;
overflow:hidden;
}
.slide {
border: 1px solid red;
width: 200px;
height: 200px;
display:inline-block;
}
Please note, using an inline display will cause it to break into multi-lines if the line width exceeds the containers width.
You may want to set absolute displays on them with fixed positions, and manipulate those positions to achieve the desired affect.