Vue-carousel: Feature: enable custom padding on pagination buttons

[rizqirizqi]

Currently available padding option:
paginationPadding which receives Number type

Enable custom padding with a different left, top, right, and bottom size.

[quinnlangille]

Hey @rizqirizqi, I'll move this to a feature request! Just to clarify, you're suggesting padding between the slide and the carousel on the top, bottom, left or right? Or padding around the carousel itself

[rizqirizqi]

oh, wait, I think we don't need a padding for every direction. so, my suggestion is to create an option only for left and right padding to give some space between two carousel items.

[quinnlangille]

Oh, that actually already exists with :spacePadding={num}, it hasn't made it to the documentation yet though. I have a PR up adding the feature. Let me know if that works for you!

[rizqirizqi]

Umm, sorry, actually I mean the padding is between two carousel dots. So yeah, my first suggestion is the right one. Maybe someone else needs to set the top and bottom padding with a different value than the left and right padding.

Current state:

With :pagginationPadding="10"

With :pagginationPadding="5"

So, I think it's better if we can specify the horizontal and vertical padding separately. For example, with options like:
paginationHorizontalPadding and paginationVerticalPadding

Or maybe we just need to enable String value for paginationPadding, so that we can use it with css padding value like this:
5
0 8px
5px 10px 10px 5px

That two examples are just my suggestions. Maybe you can think of other different and better approaches. The main purpose is to customize the dot padding not only with 1 value for every direction (top, right, bottom, left).

[rizqirizqi]

@rodrigodata I tested your code, and it's still not working as expected. Then, I checked your code, there's something needs to be fixed.

Here's the part of your code (src/Pagination.vue:77):

padding[0], padding[1], padding[2], (padding[3] = `${this.carousel.paginationPadding}px`);

And I think this is what you mean to do:

padding[0] = padding[1] = padding[2] = padding[3] = `${this.carousel.paginationPadding}px`;

This syntax is also applied for line 82 and 85.

Can you create a PR for this changes after you fixed those lines?

Thank you for your help to implement this feature :+1: