search

dynamicweb / swiffy-slider

Super fast carousel and slider with touch for optimized websites running in modern browsers.
MIT License
238 stars 29 forks source link

An issue here on small screen devices #77

Closed hliascto closed 1 year ago

hliascto commented 1 year ago

https://github.com/dynamicweb/swiffy-slider/blob/f1db755c251a4a63aa454adc2a8a2cd5779e0779/src/swiffy-slider.js#L58

During usage, an issue was identified where the slider fails to return to the beginning as expected when a user right-clicks on the last (right) element on mobile devices. To fix this, it is recommended to subtract -1, resulting in the following updated line of code:

if (container.scrollLeft >= (container.scrollWidth - container.offsetWidth - 1) && next && !noloop)

This update to the code ensures that the issue is resolved for both mobile and desktop devices, resulting in correct behavior.

nicped commented 1 year ago

Hi Thank you for the report - can you give me an example where it fails - steps to reproduce so I can verify the issue? Maybe using the configuration page of Swiffyslider.com

Would this change (changing from '>=' to '>' not do the same and in a more clean way? if (container.scrollLeft > (container.scrollWidth - container.offsetWidth) && next && !noloop)

BR Nicolai

hliascto commented 1 year ago

Hi Nicolai, actually no, I just tried your recommendation and it does not solve the problem.

To replicate the issue, please follow these steps:

  1. Using a mobile phone, navigate here: https://swiffyslider.com/examples/
  2. Go to the "Articles" example.
  3. Tap on the right arrow, as shown in the following image, to scroll through the slides until you reach the last slide. image
  4. After reaching the last slide, you will notice that nothing happens when you tap on the right arrow.

In contrast, if you perform the same action on a desktop device, clicking on the arrow of the last item will automatically take you to the beginning, which is the expected behavior by the user.

Best, hlias

nicped commented 1 year ago

I cannot reproduce that on my devices - it scrolls back to start on last slide when clicking the right navigation arrow. I can see from your screenshot that it is not a mobile device as that example would have the arrows on top of the slides on mobile.

What device and browser are you using?

hliascto commented 1 year ago

Yes that was actually a screenshot from a desktop browser. My device is a Xiaomi Redmi Note 11 Pro (it uses Android 12) and the browser was Google Chrome. I now gave it a try with Opera as well (mobile browser) and with Google Chrome on another Xiaomi Device (Mi 10T Lite, Android 11). Same issue in all cases...

nicped commented 1 year ago

Ok - seems to be Android only issue. Cannot reproduce in any browsers on other devices... But got it reproduced on an Android. I think I will not change this as it will probably just cause problems in other devices where it works fine now - and then they will calculate wrong. Also this issue is related to mobile devices where sliding with touch in most cases is the primary navigation path.