Home › Forums › Pro Support › How to set the number of post or slide that will show in tablet and mobile view?
- This topic has 3 replies, 2 voices, and was last updated 2 years, 8 months ago by
elvin.
-
AuthorPosts
-
January 21, 2021 at 7:33 pm #25806
Maria Rowena
ParticipantHello 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 #25815elvin
ModeratorHi 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 #25821Maria Rowena
ParticipantHello 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 #25890elvin
ModeratorLet’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.
-
AuthorPosts
- You must be logged in to reply to this topic.