[Resolved] Legacy Slider View – only one row on mobile

[Author]

Posts

[mariaR-3]

Hi,

I am building a 4 column slider with a Legacy View. It displays correctly on desktop, but on mobile even though it correctly shows only one column, the column contain 4 elements stacked vertically...

How can I make it work so that it only displays 1 column and 1 element at a time?

You can see in the attached image the code I have in the loop editor.

And you can see the slider here: hidden link

[Nigel]

Hi there

What you don't show which I think is relevant here are the pagination settings. Presumably your pagination is set to show 4 posts at a time, so on the initial page load the slider shows the first 4 results, and you can advance the slider by moving to the next page of results.

That is the same whether you are displaying on mobile or not. The Bootstrap column classes you include in your View output simply determine how many columns to display the 4 posts in, but the View will always output 4 posts.

It isn't possible for the same View to have different pagination settings for different screen sizes.

The only possible solution would be to create different versions of the same View, one which shows one post at a time, and the existing one which shows 4 posts at a time.

You would then need to either display the original View (4 posts) or the new View (1 post), but not both.

You could do that using conditional shortcodes to wrap where you insert the Views. You could test for mobile using the WordPress function wp_is_mobile(), though it is not based on screen size. See https://developer.wordpress.org/reference/functions/wp_is_mobile/

Or if you search on StackOverflow or similar you may find a better function that more closely aligns with what you need.

Whichever function you choose to rely on, you will need to register the function in Toolset > Settings > Front-end Content in the "Functions inside conditional evaluations" section.

[mariaR-3]

Hi Nigel, thank you for your reply.

My pagination is indeed set at 4 posts at a time (I am attaching a screenshot).

I could build a second version for mobile - or a third for tablet, that wouldn't be a problem.

But I would first try to understand the possibilities of this slider, since there are other things I'd like to do that I am afraid are not possible:

- adding a dragging functionality is not possible, is it?
- is there a way to make the slider move 1 slide at a time instead of the entire row (4 columns)? From what you're saying about the Bootstrap columns, I guess it's not possible right? Is there some other configuration option that would allow me that? Like "unformatted" ?

[Minesh]

Hello. Thank you for contacting the Toolset support.

There is no drag feature available and Toolset slider view will move the number of slides at a glance as per the slider setting. If you have set 4 items per page, then it will move all 4 items together with one slide.

In that case, wheat if you try to use the slick.js (hidden link).

Here is the reference ticket where another user used it and build his slider successfully:
- https://toolset.com/forums/topic/responsive-carousel-of-three-posts-2/#post-462465

[mariaR-3]

Thank you for the suggestion.

I am trying that, but cannot make it work properly.
It only show one column, even though I have 4 in the editor. I guess I am doing something incorrect, but I am not able to find out what is it.

I have followed the guide at the post indicated and also here: hidden link.
This is what I have inside the loop:

[wpv-layout-start]
<div class="card-carousel slider">
    [wpv-items-found]
    <!-- wpv-loop-start -->
    <wpv-loop>
        [wpv-post-body view_template="loop-item-in-accesorios-food-repeat-fields"]
    </wpv-loop>
    <!-- wpv-loop-end -->
    [/wpv-items-found]
    [wpv-no-items-found]
        <strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
    [/wpv-no-items-found]
  </div>
[wpv-layout-end]

This is what I have in the js part:

jQuery(document).ready(function($){
    $('.card-carousel').slick({
        infinite: true,
        slidesToShow: 4,
        slidesToScroll: 1,

        autoplay: false,
        autoplaySpeed: 3000,
        arrows: false,
    });
});

This is what I have inside my template:

<div class="card-carousel slider">
  
<div class="slider-card card">
[types field='accesorio-imagen' title='%%TITLE%%' alt='%%ALT%%' size='thumbnail'][/types]
<h3>[types field='accesorio-nombre'][/types]</h3>
<div class="accesorio_ref">[types field='accesorio-referencia'][/types]</div>
  <div class="accesorio_desc"><p>[types field='accesorio-descripcion'][/types]</p></div>
</div>
  <div class="slider-card card">
[types field='accesorio-imagen' title='%%TITLE%%' alt='%%ALT%%' size='thumbnail'][/types]
<h3>[types field='accesorio-nombre'][/types]</h3>
<div class="accesorio_ref">[types field='accesorio-referencia'][/types]</div>
  <div class="accesorio_desc"><p>[types field='accesorio-descripcion'][/types]</p></div>
</div>
  <div class="slider-card card">
[types field='accesorio-imagen' title='%%TITLE%%' alt='%%ALT%%' size='thumbnail'][/types]
<h3>[types field='accesorio-nombre'][/types]</h3>
<div class="accesorio_ref">[types field='accesorio-referencia'][/types]</div>
  <div class="accesorio_desc"><p>[types field='accesorio-descripcion'][/types]</p></div>
</div>
  <div class="slider-card card">
[types field='accesorio-imagen' title='%%TITLE%%' alt='%%ALT%%' size='thumbnail'][/types]
<h3>[types field='accesorio-nombre'][/types]</h3>
<div class="accesorio_ref">[types field='accesorio-referencia'][/types]</div>
  <div class="accesorio_desc"><p>[types field='accesorio-descripcion'][/types]</p></div>
</div>
  
  
</div>

I hope you can give me some hint towards the right path...

[Minesh]

Can you please share problem URL and admin access details and let me check what I can do further.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Can you please check now: hidden link

I've adjusted the vie w added as given under to your content template:
- hidden link

[wpv-view name="accesorios-autoclaves-repeat-fields" relatedto="[wpv-post-id]"]

I've also uncheck the option "Don't include current page in query result" from your view:
- hidden link

I can see on frontend the view does displays the items but you will have to adjust the card you display within you view as it shows too much space after one card.

[Minesh]

Update:
With you view:
- hidden link

I've disabled the pagination from "Pagination and Sliders Settings" section as well as no ajax search.

I've added the following CDN CSS and JS to your view's "Loop Editor" sectoin.

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

I can see now it does display the 4 items:
- hidden link

[mariaR-3]

Perfect!
Thank you, now it's exactly as it should be!