How do I make Owl Carousel have a pagination dot per item

Question

So for example if:

owl.owlCarousel({
    items: 3,
    navigation: false,
    navigationText: ["<img src='img/left.png'>",'<img src="img/right.png">'],
    slideSpeed: 300,
    paginationSpeed: 400,
    afterInit: afterOWLinit // do some work after OWL init
});

And if I had say 12 items in my carousel there would be 4 pagination dots. However, I wish to have 12 dots (1 for each item) there doesn't seem to be a way of selecting this as an option for the script?

score 0 · Answer 1 · answered Jan 15 '16 at 15:17

0

You have 4 pagination dots cause you're displaying 3 items on visible stage. If you change items:3to 1, then you'll have 12 dots and only one item which is visible at the same time.

The dots represent the number of "pages" which can be switched. It makes no sense to display one dot for each item if there are more than one visible at the same moment

answered Jan 15 '16 at 15:17

Stephan

27
5

Okay but I require 3 items per page and 12 dots. How can I achieve this? – fdsfdf Jan 15 '16 at 15:19
If the first 3 items are displayed, what should happen if a user is clicking on the 2nd dot? (e.g.) The dots represent a navigation... – Stephan Jan 15 '16 at 15:23
All the images shift along one, so on load: 12 1 2 Then when the 2nd dot is pressed: 1 2 3 3rd dot: 2 3 4 And so on... – fdsfdf Jan 15 '16 at 15:28

Ieuan · Answer 2 · 2016-03-10T07:14:33.813

I just now ran into the same issue. This is how I fixed it;

In owl.carousel.js, ctr+f for if (i % base.options.items === 0) {

Change this line to if (i % base.options.paginationItems === 0) { then go down to the configs and below items : 5, add paginationItems : 5,

Now in your init script you can just set paginationItems : 1 to have a button per image, or if you'd want something different like displaying 4 images but grouping them in one button per 2 you could set items : 4 and paginationItems : 2.

Hope this helps you or at least someone else in the future

Edit:

You also have to change if (index % base.options.items === 0 || index === lastItem) { (line 315 in my owl.carousel.js) to if (index % base.options.paginationItems === 0 || index === lastItem) {

How do I make Owl Carousel have a pagination dot per item

2 Answers2