Skip Navigation

[Resolved] How to style pagination on slider

This support ticket is created 3 years, 3 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 -
- 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 14:00 – 18:00 13:00 – 18:00 -

Supporter timezone: America/Jamaica (GMT-05:00)

This topic contains 6 replies, has 2 voices.

Last updated by Shane 3 years, 3 months ago.

Assisted by: Shane.

Author
Posts
#2211033
Screen-Shot-2021-11-02-at-10.52.26-AM.png

Tell us what you are trying to do?
I created two slider views- one for desktop and tablet and one for mobile.
The view for desktop and tablet displays 3 posts and the one for mobile will display only one post.
How can I add the pagination controls of the slider on top of the featured image on mobile? Currently they are above the image.

Is there any documentation that you are following?
No

Is there a similar example that we can see?
I want the mobile slider to look like the image attached.

What is the link to your site?
hidden link

#2211277

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Nick,

Thank you for getting in touch.

I'm assuming here that you're using a view block to create the mobile slider correct?

If so then there isn't an easy way to modify the pagination controls because of how they are defined in HTML.

Perhaps you can try using a different pagination style for the mobile version of your view.

Thanks,
Shane

#2212147

I tried creating this using Toolset Blocks and built a template since I am using Elementor. But I could not figure out how to display ALL the posts within the post type the way I have it now. I was following this tutorial: hidden link

Is there another way to achieve my goal using Toolset Blocks?

#2213133

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Nick,

The slider was created using Toolset Blocks ?

My best recommendation here is that if you're using 2 different views 1 for desktop and 1 for mobile then you change the mobile's pagination style to the dots rather than the arrows.

Thanks,
Shane

#2213191

The desktop slider is a pre-made module from the module library. I just edited it a bit to fit my liking. The one on mobile I created using Toolset Views not Blocks.

I added the pagination dots but how do I only display 3 dots in the center instead of a whole row of dots?

#2213193

Also, on mobile, is there a way to swipe the image to the left and have it go to the next post instead of using the dots?

#2216875

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Nick,

I added the pagination dots but how do I only display 3 dots in the center instead of a whole row of dots?

The number of dots is displayed based on the number of items the view is displaying vs the number of items per page. If you have 15 posts and only listing 1 post per page then you'll have 15 dots vs 3 posts per page in this case you'll only have 5 dots.

Also, on mobile, is there a way to swipe the image to the left and have it go to the next post instead of using the dots?

Unfortunately no we don't have a this functionality.

Thanks,
Shane