loading 5 different sliders on 1 page

[greenlevel]

I want to use 5 different sliders (each with their own settings and layout on 1 page.

However when I load all 5 of them the page doesn't work properly.

Is there a limit for maximum sliders?
When using 4 different sliders, the page has no problem.

I load them each with the following function (with different settinsg ofcourse).

  document.addEventListener( 'DOMContentLoaded', function () {

    new Splide( '#carousel1', {
      perPage    : 4,
      arrows:false,
      breakpoints: {
        640: {
          perPage: 1,
        },
      },
    } ).mount();
} );

Thanks in advance!