We're merging with GenerateBlocks! Learn more here.

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

Please login to receive premium support.

Support for the free plugin can be found here.

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

Tagged: , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #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!

    #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. 🙂

    #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 );

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

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