CODEWITHSUNDEEP
javascriptvue.js
Uyo-obong Akpan
Uyo-obong Akpan

Reputation: 41

How to force vue carousel to display one per page

I installed vue-carousel and set it up, it working on my page but the slider seem do display three per page

enter image description here

These are what I pass in to the component

<carousel
        :id="id"
        :navigationEnabled="true"
        :paginationEnabled="true"
        :slidesPerPage="slidesPerPage"
        :perPage="1"
        :loop="loop == 'true' ? true : false"
        :autoplay="autoplay == 'true' ? true : false"
        :autoplayTimeout="timeout ? parseInt(timeout) : 2000"
        :autoplayDirection="sliderDirection ? sliderDirection : 'forward'"
        >
</carousel>

How can I make it to display only one in the page....?

Upvotes: 0

Views: 1915

Answers (1)

Jennie Lenti
Jennie Lenti

Reputation: 36

You can set these properties to your carousel like this: :perPageCustom="[[0, 1], [768, 2], [1024,3]]" which means that on mobile it will show 1 image, on tablets 2 images and on desktops 3 images. You may adjust the viewports and the number of the images to display as you wish by changing these numbers. You can also set it to :perPage="1" which will always show 1 image regardless of the viewport size. You may check all carousel's available properties here https://www.npmjs.com/package/vue-carousel. Why have you set the property :slidePerPage?

Upvotes: 2

Related Questions