Slider jumps to the last page after clicking on the arrow

[peloucvo]

Hello,

I have a problem. I had 1 slider on the page that worked perfectly. But now I have added 2 more sliders to it. The sliders are all in one section and their display is toggled with buttons. The first slider is visible when the page loads and the other 2 only when the button is clicked. The first slider still works the same and correctly. The other two, when you click the arrow for the next page, skip to the end of the slider. After that they behave as they should, but the skipping at the beginning is annoying. I assume it's somehow related to the fact that their parent has display: none set after the page loads;

Has anyone experienced this before? Does anyone have any advice?

Thank you all.

This is the code:

new Splide("#homepageProducts1", {
      type: "loop",
      perPage: 4,
      perMove: 1,
      pagination: false,
      breakpoints: {
        1199: {
          perPage: 3,
        },
        991: {
          perPage: 2,
        },
        640: {
          perPage: 1,
        },
      },
    }).mount();

    new Splide("#homepageProducts12", {
      type: "loop",
      perPage: 4,
      perMove: 1,
      pagination: false,
      breakpoints: {
        1199: {
          perPage: 3,
        },
        991: {
          perPage: 2,
        },
        640: {
          perPage: 1,
        },
      },
    }).mount();

    new Splide("#homepageProducts15", {
      type: "loop",
      perPage: 4,
      perMove: 1,
      pagination: false,
      breakpoints: {
        1199: {
          perPage: 3,
        },
        991: {
          perPage: 2,
        },
        640: {
          perPage: 1,
        },
      },
    }).mount();
  }

[Webberjo]

Try refreshing the slider after displaying it.

Example:

const slider2 = new Splide("#homepageProducts12", {
   ...
});
slider2.mount();

yourButton.on('click', function() {
  $('#homepageProducts12').show();
  slider2.refresh();
});