[Support request] Carousel animation

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Carousel animation

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #20128
    Carlo
    Participant

    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

    #20142
    elvin
    Participant

    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-desktop with 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-mobile to the ID selector of your mobile WPSP list.

    • This reply was modified 4 weeks ago by elvin.
    • This reply was modified 4 weeks ago by elvin.
    #20160
    elvin
    Participant

    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.

    #20197
    Carlo
    Participant

    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 autoplay

    Thank you again!

    #20279
    elvin
    Participant

    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 160757 with your WPSP list ID.

    • This reply was modified 3 weeks, 6 days ago by elvin.
    #20319
    Carlo
    Participant

    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. 😉

    • This reply was modified 3 weeks, 5 days ago by Carlo.
    #20338
    elvin
    Participant

    Copying and pasting the code above, I did not noticed that the quotes were wrong for my system:
    ‘ instead of ‘

    Oh yeah good catch! That will cause issues. PHP codes must use straight quotation marks rather than the curly one.

    Nice one! good to know you made it work. No problem.:)

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.