Vue: пробел, когда карусель скользит

Question

Я столкнулся с проблемой, когда хочу создать карусель с использованием VueJ. моя проблема в том, что при работе слайдера появляются пробелы. Когда одно изображение переходило к другим изображениям, в одно мгновение появляются пробелы, которые исчезают через одну секунду.

вот мой код:

Vue.component('kangaroo-slider', {
  template: `
    <div id="carousel">

        <div class="carousel__inner" >
          <div class="carousel__item">
            <a href="#">
              <transition tag="div" :name="transitionName">
                <img :src="image[current]" class="carousel__image" :key="current">
              </transition>
            </a>
          </div>
        </div>


    </div>
  `,
  data: function() {
    return {
      image: [
        'https://www.pocarisweat.id//assets/uploads/2019/09/54ad7ba3a1892e0bcc365d021507b713.png',
        'https://www.pocarisweat.id//assets/uploads/2019/08/09b43d7b3fb60d5acf782f9510cb87a0.jpg',
        'https://www.pocarisweat.id//assets/uploads/2019/08/00a75c18203defa69bc8ad7aace5f60b.jpg'
      ],
      current: 0,
      show: false,
      transitionName: 'fade',
      show: true
    }
  },
  methods: {
    slide() {
      let maxSlide = this.image.length
      setInterval(() => {
        if (this.current < maxSlide - 1) {
          this.transitionName = 'slide-next'
          this.current++
        } else {
          this.transitionName = 'slide-prev'
          this.current = 0
        }

      }, 2000)

    }
  },
  created () {
    this.slide()
  },
})

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

вы можете увидеть, как это работает здесь: https://codepen.io/learningfrontendweb/pen/ZEEvRRZ

Answer 1

Вам просто нужно внести некоторые изменения в ваш CSS-файл

.carousel__inner {
  width: 100%;
  position: relative;
  overflow: hidden;
  height: 400px;
}

.carousel__image {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

В любом случае вот ссылка, где я это исправил:

https://codepen.io/Nevados/pen/mddXWYy