Vue. JS Owl-Carousel-2 не работает на отзывчивом - PullRequest
Новая
       16

Vue. JS Owl-Carousel-2 не работает на отзывчивом

0 голосов
/ 15 февраля 2020

Я работаю над приложением, которое подает Owl Carousel для целей Carousel, здесь можно использовать пакет NPM, указанный ниже

https://www.npmjs.com/package/vue-owl-carousel2

Все хорошо, но возникли проблемы с отзывчивостью, например, параметры карусели сказали, что адаптивный работает под параметрами объекта, но на самом деле он не работает.

Вот мой фрагмент кода: 

import carousel from 'vue-owl-carousel2';
export default {
    name: 'Team',
    components: { carousel }
}

<carousel 
  :items = 5
  :autoplay = "true" 
  :nav = "false"
  :dots = "true"
  :loop = "true"
  :margin = "30"
  :autoplaySpeed = "true"
  :autoplayTimeout = "5000"
  :responsive = "{
     0:{items:1},576:{items:2},768:{items:2},1200:{items:4},1500:{items:5}
  }"
>

    <div class="team-image">
          <img src="/image/1.jpg" alt="image">
    </div>
    <div class="team-image">
          <img src="/image/2.jpg" alt="image">
    </div>
    <div class="team-image">
          <img src="/image/3.jpg" alt="image">
    </div>
    <div class="team-image">
          <img src="/image/4.jpg" alt="image">
    </div>
    <div class="team-image">
          <img src="/image/5.jpg" alt="image">
    </div>
    <div class="team-image">
          <img src="/image/6.jpg" alt="image">
    </div>
</carousel>

, но 5 элементов показывают даже мобильное устройство, а не все устройства.

Как я могу решить эту проблему?

Спасибо

...