Skip Navigation

[Resolved] Show different amount of results in sliders view for mobile and desktop

This thread is resolved. Here is a description of the problem and solution.

Problem: I have a slider View on my site that displays several pages of results. On a mobile device, I would like to reduce the number of results with a different limit.

Solution: There's no JavaScript API for slider Views, so manipulating the page numbers and limits on the front-end isn't supported. However, if you can implement a backend library that can determine the current User's screen size effectively, you can use the Views API to select a different Content Template. Or you can use CSS and Media Queries to show / hide different pieces of content based on screen size.

Relevant Documentation:
https://toolset.com/documentation/programmer-reference/views-filters/#wpv_filter_force_template
https://toolset.com/documentation/programmer-reference/views-filters/#wpv_filter_force_wordpress_archive

This support ticket is created 5 years, 9 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
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 4 replies, has 2 voices.

Last updated by cushmanW 5 years, 9 months ago.

Assisted by: Christian Cox.

Author
Posts
#1225361
PROP-LISTINGS-MOBILE-18-03-19.jpg

Tell us what you are trying to do?

I have a view that show results as a slider and i want to show different amount of results depending on whether it is mobile or desktop.

Is there any documentation that you are following?

No.

Is there a similar example that we can see?

No, but in the attached image you can see how must to be the slider on mobile version.

What is the link to your site?

The site using the desktop version of the slider: hidden link

#1225455

Hi, unfortunately there's not an easy way to set up the slider page count as a variable based on screen size. One alternative is to use two identical Views with different page counts, then place both of those Views in the site contents. Use custom CSS with media queries to show or hide each View based on the screen size. The drawback here is performance - the browser is running two sliders at the same time, even if they aren't both visible.

Any other approach will require custom code beyond the scope of support we provide here in the forums. If you'd like some assistance with the media query approach, let me know where I can see the View on your site and I'll take a closer look.

#1225475

Hi Christian, thanks for your answer. As i supossed, the only way to do it is with css and media queries, wich as you say, is bad for performance. I will gonna try to find a php or js solution to not mess with performance. Thanks!

#1225913

I understand. If you find a PHP solution that can determine screen size effectively, then you can use our API to display a different Content Template or a different WordPress Archive with a different slider:
https://toolset.com/documentation/programmer-reference/views-filters/#wpv_filter_force_template
https://toolset.com/documentation/programmer-reference/views-filters/#wpv_filter_force_wordpress_archive

#1227367

Thank you!