- This topic has 6 replies, 2 voices, and was last updated 2 years, 11 months ago by
.
-
Posts
-
Hi there,
in a 6 “cards” carousel, is it possible to have it automatically switch from one “card” to the next one each 3 seconds?
It would be really useful expecially when viewing the webiste with a mobile, for example when showing just one post at a time.Thank you. Best wishes. Carlo
Hi Carlo,
WPSP by default doesn’t have responsive settings that will let you display different columns for different viewports.
But there’s definitely a workaround that will surely work. This is definitely possible.
You can simply create 2 WPSP lists. 1 that only appears on desktop/tablet and 1 that only appears for mobile. Place then on the same page.
Leave your desktop list to the 6 card carousel list’s WPSP settings but make it disappear on mobile by custom CSS code.
Example.
/* hide desktop list on mobile */ @media (max-width:768px){ #wpsp-list-desktop { display:none; } }Just replace the
#wpsp-list-desktopwith id selector of your desktop WPSP list.We then set the carousel settings for the mobile list to only display 1 post at a time and then make sure it only shows on mobile by setting this CSS.
/* hide by default */ #wpsp-mobile{ display: none; } /* display on mobile*/ @media(max-width:768px){ #wpsp-mobile{ display:block; } }Just change the
#wpsp-mobileto the ID selector of your mobile WPSP list.And the previous reply is if you want different settings for 2 viewports. But I believe 1 post per slide display is already the default on mobile carousel so the previous reply may not be necessary if that’s the only thing needed.
As for automatic switching. I believe you’ll need the carousel to autoplay.
If that’s the case, here’s the PHP filter for it.
add_filter( ‘wpsp_carousel_args’, function( $args ) {
$args[‘autoplay’] = true;return $args;
} );Hope these information helps.
Hi elvin,
thank you for your support.
Yes, autoplay is what I am looking for. 🙂
1) Where should I put the code of the filter you mentionted?
– Generally in functions.php?
I have tried creating a snippet with code snippets, put a carousel in a page and tested, but the carousel seems to be stuck on the first card.2) Are there any parameters I can use?
– seconds between one card to another
– define which carousel is in autoplayThank you again!
1.) It should work on either functions.php or code snippet. Perhaps it was saved but is not activated?
2.) Here’s a code that answers both.
add_filter( ‘wpsp_carousel_args’, function( $args, $settings ) {
if ( 160757 === (int) $settings[‘list_id’] ) {
$args[‘autoplay’] = true;
$args[‘autoplaySpeed’] = 100;
}
return $args;
}, 10, 2 );The autoplaySpeed value controls the speed in milliseconds. The if condition applies it to the specific WPSP list ID. Just replace
160757with your WPSP list ID.1) yes it was activated.
I found the problem and fixed it:
for everyone else should have the same issue:Copying and pasting the code above, I did not noticed that the quotes were wrong for my system:
‘ instead of'Replacing them with the correct ones fixed it.
Here’s my code
add_filter( 'wpsp_carousel_args', function( $args, $settings ) { if ( 160757 === (int) $settings['list_id'] ) { $args['autoplay'] = true; $args['autoplaySpeed'] = 3000; } return $args; }, 10, 2 );With 160757 to be replaced with the list id of the right list.
Thank you elvin. 😉
- You must be logged in to reply to this topic.