How to set the number of post or slide that will show in tablet and mobile view?

Tagged: more, slides, tablet

This topic has 3 replies, 2 voices, and was last updated 2 years, 8 months ago by elvin.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
January 21, 2021 at 7:33 pm #25806

Maria Rowena
Participant

Hello Great Support Team,

I am using your carousel feature to show custom post in my website.

Currently, in desktop view, it shows 4 slides (4 columns or 4 post to show in the setting).

Is there a way that I can set the number of post that will show in tablet and mobile?

I mean, right now, in tablet view, it shows 1 slide at a time and 1 slide to post to scroll. I want to show 2 slides or define it anytime a want to change.

Can you help me achieve it?

Thank you so much!

January 21, 2021 at 11:34 pm #25815
elvin
Moderator
Hi there,

The carousel uses Slickjs.
https://kenwheeler.github.io/slick/

You can use wpsp_carousel_args filter to add in other things you want.
```
add_filter( 'wpsp_carousel_args', function( $args , $settings ) {
    if ( 399 === (int) $settings['list_id'] ) {
        $args['responsive'] = 'responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]';
    }
    return $args;
}, 10, 2 );
```
breakpoint: 1024, are basically the viewport sizes. 1024 is for desktop. 600px is for smaller mobile phones but you may have to change this to 768px to cover for the majority of all mobile viewports.

You can add in more breakpoints and settings if you want, just pay attention to the syntax for it to work properly. 🙂
January 22, 2021 at 12:09 am #25821

Maria Rowena
Participant

Hello Elvin,

I tried your code but It did something wrong.

I stays with four slides even in tablet and mobile. It becomes unresponsive.

Here’s the code I use:

`add_filter( ‘wpsp_carousel_args’, function( $args , $settings ) {
if ( 1027 === (int) $settings[‘list_id’] ) {
$args[‘responsive’] = ‘responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 4,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: “unslick”
// instead of a settings object
]’;
}
return $args;
}, 10, 2 );

January 24, 2021 at 8:53 pm #25890
elvin
Moderator
Let’s try removing the responsive: before the array [{ ... }] wrapper.
```
add_filter( 'wpsp_carousel_args', function( $args , $settings ) {
    if ( 1027 === (int) $settings['list_id'] ) {
        $args['responsive'] = '[{
breakpoint: 1024,
settings: {
slidesToShow: 4,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: “unslick”
// instead of a settings object]';
    }
    return $args;
}, 10, 2 );
```
Let us know how it goes.
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

[Support request] How to set the number of post or slide that will show in tablet and mobile view?