Turn off slide duplication if total slides is less than perPage | potential bug with redefining breakpoints?

[johnson-jd]

I'm using Splide to generate a product recommendations slider. The slides are pulled from a list of similar products. Generally, the recommendations section will show six similar products at a time (perPage: 6). However, not all items will have as many as six similar products; for example, the product I'm testing with only has four recommended items. Splide's default behavior is to make enough clones visible to fill the slider. On my test item, this means two products in the recommendations will be duplicates. This pointlessly clutters up the page, as it does no good to recommend the same product twice.

If I wasn't using breakpoints to make the Splide responsive, I could just do this:

var splide = new Splide( "#splide-id, { 
        perPage: 6,
        breakpoints: {
                1280: 5,
                1180: 4,
                1080: 3,
                880 : 2
        }
});
if ( splide.length < 6 ) {
        splide.options = { perPage: splide.length };
}

I've tested this and it works perfectly as long as the user doesn't change the viewport. However, if the viewport does get changed, it will revert entirely back to the old behavior.

So, I thought I just need to update the breakpoints, right? Well, two problems:

1. I would have to make 5 different breakpoint definitions: one standard (six items), and one for each potential alternative number of items (there will always be at least two).
2. Setting splide.options = { breakpoints: {values} } or splide.options.breakpoints = { values } doesn't actually change breakpoint functionality. I can call the objects themselves to confirm the values have been updated, but it seems that however breakpoints are defined on .mount() is the only functionality they'll have. I tried using refresh(), but I'm assuming this fails because .refresh() calls the original Splide definition, disregarding any attempted updates.

[johnson-jd]

I've developed a workaround by targeting the number of slides before Splide is mounted, then using ternary operators to define breakpoints.

var elms = document.getElementsByClassName( 'splide' );

for ( var i = 0, len = elms.length; i < len; i++ ) {
        // save the total number of slides to a variable
        var slideCount = elms.querySelector('ul.splide__list').childElementCount;

        if ( slideCount < 6 ) {
                new Splide( elms[ i ], {
                        perPage:    slideCount,
                        breakpoints: {
                                1180: {perPage: (slideCount < 4 ? slideCount : 4)},
                                1080: {perPage: (slideCount < 3 ? slideCount : 3)},
                                880:  {perPage: 2} // if there can be only one slide, this should also be ternary
                        }
                });
        } else {
                // normal initialization
        }
}

This is working so far for me. I'll try to remember to update this post if I find any new information or if something goes horrendously wrong.

[jyoseph]

In case anyone is still looking for a solution to this, this seems to work:

    var splide = new Splide( '.splide', {
        type   : 'loop',
        perPage: 4
    });

    splide.on( 'mounted', function() {
        // if fewer slides than provided in options, set option to the number of slides
        if ( splide.length <= splide.options.perPage ) {
            splide.options.perPage = splide.length;
        }
    });

    splide.mount();

[jyoseph]

Coming back for all my homies still using jQuery. Here's a solution that mounts multiple splides and includes breakpoints...

    if( $('.splide').length > 0 ){

        // set the max per page
        var perPage = 4;

        // get all splides
        var splides = $('.splide');

        // go through each splide
        splides.each(function(i,ele){

            // get the number of slides in this splide
            var splideSlides = $(ele).find('.splide__slide').length;

            var splide = new Splide( splides[i], {
                type   : 'loop',
                perPage: splideSlides < perPage ? splideSlides : perPage,
                pagination: false,
                breakpoints: {
                    380:{
                        perPage: 1
                    },
                    500:{
                        perPage: 2 > splideSlides ? splideSlides : 2
                    },
                    750:{
                        perPage: 3 > splideSlides ? splideSlides : 3
                    },
                    2000:{
                        perPage: perPage > splideSlides ? splideSlides : perPage
                    }
                }
            } );

            splide.mount();

        });

    }

[michiiee93]

I think the better approach is to work with the clones option.

//set the splide option variables depending on the number to be displayed

switch(number) {
                case 1:
                    drag = false;
                    splideperpage = 1;
                    splideClones = 0;
                    splidewidth = 200;
                    break;
                case 2:
                    drag = false;
                    splideperpage = 2;
                    splideClones = 0;
                    splidewidth = 200;
                    break;
                case 3:
                    drag = false;
                    splideperpage = 3;
                    splideClones = 0;
                    splidewidth = 200;
                    break;
                case 4:
                    drag = false;
                    splideperpage = 4;
                    splideClones = 0;
                    splidewidth = 200;
                    break;
                default:
                    drag = true;
                    splideperpage = 4;
                    splideClones = 8;
                    splidewidth = 170;
            }

new Splide('.splide', {
                clones: splideClones,
                type: 'loop',
                drag: drag,
                focus: 'center',
                pagination: false,
                arrows: false,
                autoWidth: true,
                perPage: splideperpage,
                autoScroll: {
                    speed: splide_speed,
                    pauseOnHover: false
                },
            })
                .mount(window.splide.Extensions);

[illustratedan]

I have the same problem and it seems to be a recurring issue with other vanilla JS slider libraries. The behaviour works great when 'type' is set to 'slide' but not when set to 'loop'. The other challenge is getting this to work on resize as well as load. I can't get any of the above solutions to work so would be awesome if this was built into the library.