ui icon indicating copy to clipboard operation
ui copied to clipboard

Disabling "center" option in Carousel makes click behaviour strange

Open vstyle opened this issue 3 years ago • 7 comments
trafficstars

Hi there. Disable the center options in Carousel, try to move the content by swipe and then click on the slide during animation is in progress to stop it. As results the carousel forwards one iteration back and it's very inconvenient, please check the video attached. Is this normal behaviour?

https://user-images.githubusercontent.com/3931476/170662758-2698ea6b-4978-4e6d-8596-287f557c26db.mov

Thanks!

vstyle avatar May 27 '22 08:05 vstyle

Hi,

When you swipe the 5th slide in second carousel, it does not go past the left edge. 4th slide is still visible, therefore the script considers that you are selecting the 4th slide and it gets centered. If you would make a bit faster flick, then the script would navigate to the next slide regardless of the carousel position at the end of the swipe. Maybe I could tweak a flick detection.

fancyapps avatar May 30 '22 12:05 fancyapps

It would be great to have the same tweak behaviour as we have it with the center options enabled, thank you! It's really great js widget!

vstyle avatar Jun 03 '22 13:06 vstyle

Hi,

When you swipe the 5th slide in second carousel, it does not go past the left edge. 4th slide is still visible, therefore the script considers that you are selecting the 4th slide and it gets centered. If you would make a bit faster flick, then the script would navigate to the next slide regardless of the carousel position at the end of the swipe. Maybe I could tweak a flick detection.

Ah I just got you, so you may try to click on the 5th slide once it is fully visible and carousel will navigate you back to 4th slide anyway, looks like there is problem with navigation exactly if the center options is disabled.

vstyle avatar Jun 13 '22 13:06 vstyle

I do not understand where you see the problem. If center is true (default), then active slide will be the one that overlaps imaginary line that goes vertically in the middle of the carousel. If center is false, then this line is left border of the carousel. E.g., if at least one pixel of 4th slide overlaps left border, it will be marked as selected slide. Note: if "fast flick" is detected, then carousel slides to next/prev slide regardless of the position.

fancyapps avatar Jun 15 '22 07:06 fancyapps

Check my new video please, as you can see:

  • center: true once I stop the slide, it goes center, looks ok and works properly
  • center: false once I stop the slide 5 (slide 5 is fully visible) it moves the carouse to slide 4, why it happen?

It is not comfortable I think. It is more uncomfortable once you have many small items in carouse.

https://user-images.githubusercontent.com/3931476/176383331-5e6e0db4-d6e9-45e3-af7c-851762e1203e.mov

vstyle avatar Jun 29 '22 08:06 vstyle

So, now I understand you. You expect the selected slide to be the most visible, but currently the script works as I described - it marks the slide as selected, which overlaps the left border. Thank you for your valuable feedback, I will change the algorithm.

fancyapps avatar Jun 29 '22 14:06 fancyapps

It was hard to explain for me but you got it finally, thanks! Waiting for fix!

vstyle avatar Aug 08 '22 11:08 vstyle

Hi, It also seems to work as intended in v5.

fancyapps avatar Mar 12 '23 12:03 fancyapps