Clicking prev & next jumps to the wrong item in loop mode

janek commented 1 year ago

Checks

[X] Not a duplicate.
[X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Versions

3.2.2, 3.2.5, 3.2.7, 3.6.6

Description

This is a duplicate of #482, which is closed, but seems to still be broken for me. I was using 3.2.2, but then tried other versions.

Apologies for not providing a reproduction. The behaviour seems to be:

I have four items
if I go right, I would expect to go 1 -> 2 -> 3 -> 4. Instead it's 1 -> 4 -> 1 -> 2 -> 3 -> 4
if I go left, I would expect to go 1 -> 4 -> 3 -> 2 . Instead it's 1 -> 3 -> 1 -> 4 -> 3 -> 2
so it seems I always get one wrong item, then a repetition of the starting item, and then it starts working correctly

Feel free to close if the solution is not easy. I would like to migrate to 4, but haven't managed it yet.

ingwillym commented 1 year ago

Hello, similar issue here!

Using version 4.1.4 (https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js)

Only 3 slides with the following HTML code:

<section id="spl_premios" class="splide" aria-label="Splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide"><div><h3 class="text-center">Premio Diario</h3><img src="img/premios/pre_01.png" class="img-fluid w-100"></div></li>
      <li class="splide__slide"><div><h3 class="text-center">Premio Semanal</h3><img src="img/premios/pre_02.png" class="img-fluid w-100"></div></li>
      <li class="splide__slide"><div><h3 class="text-center">Premio Final</h3><img src="img/premios/pre_03.png" class="img-fluid w-100"></div></li>
    </ul>
  </div>
</section>

And JS:

const premios = new Splide("#spl_premios", {
    type   : 'loop',
    perPage: 1,
    perMove: 1,
    arrows: false,
  });
premios.mount();

When it loads for the first time, the slider shows the slide number 2, when it should be the 1st one. If you click next, it makes an animation but finally goes to the number 2 again!

After that, if you click next or prev, finally seems to work ok.

Please let us know how to solve it.

Great job!

Thanks,

tomfrit commented 8 months ago

I've got the same problem. In Loop mode Splide sometimes seems to init on the first clone (which is the second to last actual slide). I avoid this by not using loop but instead using custom prev/next buttons that check the index and manually go back to the first/last if the end reached.

Splidejs / splide