Calculation with hidden <li> elements

[fabianlucia]

I need to hide specific <li> elements by button in order to allow a filter-style slider.
Sadly, when setting the <li>-elements to display:none and refreshing the slider, there are still gaps and the "next/prev" buttons are kind of buggy.

Does anyone have an idea on how to fix this or make this work?

The code is following (JS):

    var splides = [];

    // Initialize Splide sliders and store their instances in the splides array.
    var elms = document.getElementsByClassName('splide');
    for (var i = 0; i < elms.length; i++) {
        var splide = new Splide(elms[i]);
        splides.push(splide);
        splide.mount();
    }

    // Function to refresh all Splide sliders.
    function refreshSliders() {
        splides.forEach(function (splide) {
            splide.refresh();
        });
    }

    // Attach a click event listener to the filter buttons.
    jQuery('.course-slider-filter .filterbutton').on('click', function () {
        jQuery('.filterbutton.active').removeClass('active');
        jQuery(this).addClass('active');
        jQuery('.course-slider li.splide__slide').addClass('hidden');

        var filter = jQuery(this).data('filter');
        if (filter == 'all') {
            jQuery('.course-slider li.splide__slide').removeClass('hidden');
        } else {
            jQuery('.course-slider .' + filter).each(function () {
                jQuery(this).removeClass('hidden');
            });
        }

        // Refresh the Splide sliders after hiding the slides.
        refreshSliders();
    });