[Vuejs]-Containers are not inline in my Vue Swiper

by

0👍

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.

Leave a comment