html - 我该如何修复这个 vue-carousel？

Question

我有这个带有所有组件（轮播，幻灯片）的 vue-carousel，但我遇到了视觉问题：我希望卡片连续显示，作为一个常见的轮播，但我认为代码中存在问题。

实际情况是这样的：

所以当我用鼠标左右抓住滑块时，这只是一个视觉问题（HTML，CSS）

我该如何解决？

这是带有旋转木马的模板，我在想也许 v-fors 干扰了旋转木马，但我需要它们，所以我需要解决这个问题，而不是同时接触两个 v-fors。

<template>
  <div>
    <Jumbotron />
    <div class="container">
      <carousel>
        <div class="row">
          <div class="col-xs-12 col-md-4 col-lg-4">
            <slide v-for="(sponsor, index) in sponsors" :key="index">
              <div
                v-for="(musician, index) in sponsor.musicians"
                :key="`mus-${index}`"
              >
                <div v-if="today <= musician.pivot.end_date">
                  <div class="card">
                    <img
                      class="card-img-top"
                      :src="'/storage/' + musician.cover"
                      alt="Card image cap"
                    />
                    <div class="card-body">
                      <h5 class="card-title">{{ musician.stagename }}</h5>
                    </div>
                    <router-link
                      class="btn btn-orange text-white"
                      :to="{
                        name: 'musician',
                        params: { slug: musician.slug },
                      }"
                      >Vedi profilo</router-link
                    >
                  </div>
                </div>
              </div>
            </slide>
          </div>
        </div>
      </carousel>
    </div>
  </div>
</template>

标签： htmlcssvue.jscarousel