Question

我对VueCarousel-inner的转换有疑问。

在页面加载时，可以看到4张幻灯片。当我单击以向左滑动时，所有10张幻灯片都向左滑动，而看不到。

我想要实现的是单击导航时仅移动一张幻灯片。而且应该固定伸缩底座，因为幻灯片的内容是固定的，没有响应。

我发现了问题14，并尝试了该解决方案，但无法获得所需的结果。

<div class="VueCarousel-inner" style="transform: translate(0px, 0px); transition: transform 0.5s ease 0s; flex-basis: 1225px; visibility: visible; height: auto;">
    <div tabindex="-1" aria-hidden="true" role="tabpanel" class="VueCarousel-slide"><article class="card mb-2" style="min-width: 15rem; max-width: 15rem;">
    </div>
</div>

.VueCarousel-inner, .VueCarousel-slide{
  flex-basis: 15rem;
}

<div class="VueCarousel-inner" style="transform: translate(-2450px, 0px); transition: transform 0.5s ease 0s; flex-basis: 1225px; visibility: visible; height: auto;">
    <div tabindex="-1" aria-hidden="true" role="tabpanel" class="VueCarousel-slide"><article class="card mb-2" style="min-width: 15rem; max-width: 15rem;">
    </div>
</div>

而且，由于某些原因，幻灯片处理起来很奇怪。两张幻灯片始终具有VueCarousel-slide-active类，实际上其中有4张幻灯片可见。

<div tabindex="-1" role="tabpanel" class="VueCarousel-slide VueCarousel-slide-active">
</div>
<div tabindex="-1" role="tabpanel" class="VueCarousel-slide VueCarousel-slide-active">
</div>
<div tabindex="-1" aria-hidden="true" role="tabpanel" class="VueCarousel-slide">
</div>
<div tabindex="-1" aria-hidden="true" role="tabpanel" class="VueCarousel-slide">
</div>
<div tabindex="-1" aria-hidden="true" role="tabpanel" class="VueCarousel-slide">
</div>
<div tabindex="-1" aria-hidden="true" role="tabpanel" class="VueCarousel-slide">
</div>
<div tabindex="-1" aria-hidden="true" role="tabpanel" class="VueCarousel-slide">
</div>
<div tabindex="-1" aria-hidden="true" role="tabpanel" class="VueCarousel-slide">
</div>
<div tabindex="-1" aria-hidden="true" role="tabpanel" class="VueCarousel-slide">
</div>
<div tabindex="-1" aria-hidden="true" role="tabpanel" class="VueCarousel-slide">
</div>

有人可以帮忙吗

Vue-Carousel滑动所有幻灯片而不是单个幻灯片，如何修复

0 个答案: