Pagination Dots

Hi @theblacklodge,

Thanks for your query. Hope you are fine.

To get the row of pagination dots to move up closer to the row of slider thumbnails can be done with the Custom CSS. Please put the below CSS in the plugin’s custom CSS field. Please see the screenshot where you need to put the CSS.

.swiper-container-horizontal>.swiper-pagination-bullets{
    margin-top: 10px !important;}

[Note: Change the margin value (10px) as per your need.]

Hope the above CSS will help you to achieve your goal. Please let us know if it works or not.

Have a great weekend!

Thanks.

• This reply was modified 3 years, 10 months ago by Md Khalil Uddin.

Hi,
Thanks for your reply.
Tried this and it only works to a certain point.
For example, if I change the value to 1px I would exect the dots to be almost flush with the slider thumbnails, but it isn’t.
Could it be because the container for the thumbnails has some bottom padding that is preventing the dots getting any closer?

Thanks
Chris

Hi @theblacklodge,

You can tweak the settings as you want with the below CSS.

.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 50px;
}
.sp-wcsp-pagination {
    position: absolute;
}

But we don’t recommend this. It will overlap the thumbnail title and it will not be readable.

Hope you understand. Thank you.

Hi,
Many thanks for your reply.
That new piece of code didnt seem to work, had a play with it and this does seem to work for me:

.swiper-container-horizontal>.swiper-pagination-bullets{
    margin-top: 10px !important;}

.swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 10px !important;}
}
.sp-wcsp-pagination {
    position: absolute !important;}
}

I’m not using titles so any ovelap isn’t a problem.
Thanks for all your help, it is very much appreciated.

Chris

Hi @theblacklodge

We’re very glad to hear that it works perfectly now. If you are happy with our plugin and support, please inspire us by posting a good review in the plugin review section.

Never hesitate to ask us if you need any further help in the future.

Thank you!