[Resolved] Carousel breakpoint behaviour

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Carousel breakpoint behaviour

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #12304
    jaiji
    Participant

    Hi again,

    I’m working on a different site to my earlier post about card image sizes. It’s still a local dev site so I cant share a URL just now but it’s pretty fresh so very little has yet been done or installed.

    The page is made with Elementor. I have a WPSP carousel set up, using the Polaroid card style, and I’ve set it to display (and scroll) one post at a time. There’s some custom CSS on the layout – largely to remove the alternating layout so that images are always on the left, remove top and bottom margins and alter the dot sizes and position – but it’s all good at widths over 1024px.

    I have Elementor set up to hide the Polaroid carousel at 768px or less, and display a different one which uses the Base card style. Also all good.

    The problem: between 768px and 1024px the carousel changes to show two posts at once where I need just the one. It seems the width for each (swp-show-posts-single) is set with inline CSS (using JS?) to be half the screen width. It seems that’s a default behaviour – as though it’s expecting a three post carousel to move to two posts at 1024px before becoming one post at 768px. I can’t see any obvious way to change it to display only one post at those widths with CSS and my JS skills are minimal to the point of non-existent, plus I don’t want to mess directly with plugin code. I can confirm the issue still exists without any of the custom CSS.

    Any help appreciated. To replicate the setup it’s just a carousel using Polaroid cards set to display one post, and scroll one post at a time, then check the number of posts displayed between 1024-768px.

    #12324
    Tom
    Keymaster

    Hi there,

    Give this function a shot:

    add_filter( 'wpsp_carousel_args', function( $args ) {
        $args['responsive'] = array(
            array(
                'breakpoint' => 1024,
                'settings' => array(
                    'slidesToShow' => 2,
                    'slidesToScroll' => 2,
                ),
            ),
            array(
                'breakpoint' => 768,
                'settings' => array(
                    'slidesToShow' => 1,
                    'slidesToScroll' => 1,
                ),
            )
        );
    
        return $args;
    } );

    You can change the breakpoints and the slidesToShow/Scroll to whatever you need.

    Let me know if you need more info 🙂

    #12336
    jaiji
    Participant

    Perfect. Thank you.

    #12362
    Tom
    Keymaster

    You’re welcome 🙂

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