Vue-Карусель слайды все слайды вместо одного слайда, как исправить - PullRequest
Новая
       31

Vue-Карусель слайды все слайды вместо одного слайда, как исправить

0 голосов
/ 17 марта 2019

У меня проблема с преобразованием VueCarousel-inner.

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

Чего я хочу добиться, так это того, что при нажатии на навигацию перемещается только один слайд. И flex-base должна быть исправлена, потому что содержимое моих слайдов фиксировано, оно не отвечает.

Я обнаружил проблему 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>

Может кто-нибудь помочь, пожалуйста

...