Nav and controls can become out of synch

aimeehainesTJ commented 3 years ago

Issue description: We have a carousel of 10 items, showing 4 at a time. All is fine using the nav buttons or going forwards with the Next button. But if you go all the way to the end, and then use the Back button to go back, you get unexpected behaviour in two ways. 1) The first nav dot is highlighted when actually you are on page 2 not page 1. This is probably the biggest bug of the two. 2) You see items 3, 4, 5, and 6 - whereas if I click on the second navigation dot you see items 5, 6, 7, 8. I'd expect the Previous button to take me back one full page but it doesn't. I think if it wasn't for the first issue though, this wouldn't be so bad.

Settings are:

tns({ container: el, items: 2, slideBy: 'page', arrowKeys: true, controls: true, loop: false, mouseDrag: true, speed: 500, autoplayTimeout: 10000, navPosition: 'bottom', responsive: { 450: { items: 2 }, 640: { items: 3 }, 900: { items: 4 }, } });

Demo link/slider setting: https://www.chevinfleet.com/ scroll to the Why Chevin section

Tiny-slider version: 2.9.2

amankkg commented 3 years ago

Me too having a similar issue - when items: 2 or more.

There is also another bug, not sure if it is related - when I try to show an odd number of slides my prev/next buttons disappear or unable to initialize

MRamonLeon commented 1 year ago

We faced the same issue. The problem is: When you go forward to pages, the sliders shows you elements 6 and 7 (0-indexed) to be able to show you 4 elements. When you go back, the slider goes to 4 sliders back, hence the 2. At this point, 2 is in the first page, so it shows you the paginator at first page. If you again click next page, it goes from 2 to 6 again showing the 6,7,8 and 9 slides, considering it's on the last page again. So you end up either on the 1st or 3rd page, impossible to reach the 2nd page again.

🤣 Funny eh? 🤦🏽

ganlanyuan / tiny-slider

Nav and controls can become out of synch #677