1

I am working on an application which is done by Owl Carousel for Carousel purpose, here the below NPM package could use for that

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

Everything is fine but came issues in responsive like the carousel options said the responsive is working under the object options but actually it's not working.

Here is my snippet code:

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>

but the 5 items showing even a mobile device rather than all of the devices.

How can I solve that?

Thanks

jesica
  • 645
  • 2
  • 13
  • 36

1 Answers1

1

Setting "responsivebaseelement" fixed this issue. It can be set to your wrapper class. Setting it to "body" worked for me.

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html#responsivebaseelement

Default value for "responsivebaseelement" is "window". And I guess vue doesn't work properly with it.

<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}
   }"
   responsivebaseelement="body"
>
.....
</carousel>
Muhammad Abdullah
  • 1,042
  • 7
  • 10