Slider on loop, clicking on the last item ('next') doesn't resets the slides to the first, it gets stuck, looping works when clicking on previous

[philippschmid]

Describe the bug I spent quite some time with this, maybe I am doing something wrong, but I found a very strange behaviour. Whenever I have an even amount of slides a bug appears, the slider doesn't loop back to the first item, setting the amount of slides to an odd amount it works fine.

To Reproduce Steps to reproduce the behavior:

1. The bug appears to be happening in Chrome and Edge (What the customer told me), it also happens on my Sony Xperia 5V mobile chrome
2. The weird thing about the behaviour on desktop is it just starts happening on a width more than 1440px, below it works with an even number of slides too
3. Hours of comparing the sliders on my system and the samples online didn't help, until I found out it is the number of items...

Expected behavior The slider should loop through all of the items no matter concerning the viewport and amount of slides

Screenshots The website will go online today, for testing purposes I can set the amount of items to an even number and send though the link, I would prefer to do this privately though.

Desktop (please complete the following information):

• Macbook Pro 16-inch, 2021
• Chrome, mobile Chrome on Android

Additional context Add any other context about the problem here.

[nicped]

Hi

Thank you for using Swiffy Slider!

I have tried reproducing the issue locally and cannot make it fail. Can you try to reproduce it in a clean environment, on a codepen or similar?

Usually these things will happen due to CSS issues in the slides of your implementation. You should be sure to check that the size of your slide with margin, padding etc. does not 'push' to the slider boundaries.

[philippschmid]

Hi,

thank you for coding such a great product!

I have disabled all of the additional CSS and still had the issue. I think I need to correct myself, now it stopped working on even and odd elements, feels like this is some Chrome issue.

I tried a couple of things on the slides but that should be totally fine.

I just can't find the solution. Here is a codepen with the replicated behaviour:

https://codepen.io/philippschmid/live/VwJeLvX

I hope this helps

[nicped]

Thanks - I see the issue now.

But also if I remove the vast amount of custom css you have on that page on the pen https://codepen.io/philippschmid/pen/VwJeLvX, the slider works just fine....

The issue cannot be reproduced using the default Swiffy Slider - with no customizations.

[nicped]

With a quick inspection of your markup, I can see that the internals of your slide is wider than the actual slide - destroying the calculations. See:

It seems to be caused by these width:100% which are on elements that might be missing position:relative - if you remove the width it works again.

[philippschmid]

Hi,

yep that seems like a solution, I am uploading it to the live site. I hope it works. Although I don't really get it, why would the width without margins interfere with this?

Thank you so much for the effort!

Cheers

[philippschmid]

@nicped unfortunately it is not working on the live system. I removed all unnecessary width specifications. I can't explain this anymore, the codepen works, but there aren't any differences except the content.

I have to define a height and work with height 100% but that shouldn't be any issue. Once I go below 1440px is start working, on mobile it is broken again.

I would appreciate some help here.

[nicped]

Your site works on my machine (Chrome, FF, Brave, Edge). Clear your browser cache - or try a incognito window.

[philippschmid]

@nicped I just sent the link to a friend only to see if I am not going mad. On his resolution of 2560 x 1440 it works like a charm, once I told him to get it to above 1440px like 1450px he told me the right arrow doesn't fully loop through.

How can this be possible? After clearing everything it is still not working, I am sorry.

[nicped]

Dude - you gotta stop. You need to do your own debugging or find someone you can pay to do it. This is OS - you cannot take this much support...

Your site works fine now - from my iPhone, over my 2048px desktop monitors to my 4K laptop.

[philippschmid]

Dude, I can't stop since this is a paid project for a client. I understand your point and I would be happy to pay money to solve this issue. I just can't leave it like this, the customer also noticed the behaviour. I did debug and spent 2 full days on it, adding various sliders to the installation. I am desperate here. The behaviour makes no sense. It just doesn't want to work on my MacBook 16-inch (3456 × 2234) and screen resolution 1728 x 1117. Same goes for my mobile phone.

[nicped]

Macbook. Think it is the scrollbar width since you are in full screen. Try adding this css after swiffyslider.css

.slider-container>* {
    width: 100vw!important;
}

[philippschmid]

Hey man, just wanted to update you. First of all, thanks for your support. I was completely lost and desperate, hope I didn't stress you. For some reason out of a sudden, all devices are working again, without me changing a single line of code. The customer is happy. Thanks again.

[nicped]

Thanks. Though I will never understand how such a non-issue can become a major problem.

That aside, I have figured out that in some cases when the slider is in fullwidth on some device types (or browsers), the slider container will end up having a size like 1912.2 px wide - and that can cause the loop to not function as expected. 1912.1-4 is an issue, 1912.5-9 is not - so a rounding related problem.