selected Indicator is not working correctly on desktop

[waleedarshad]

Describe the bug
Selecting indicator doesn't hightlight selected indicator and jump to next indicator icon. Clicking indicator five highlight 6. Clicking on 6 highight 7 and clicking on 7 highlight 8

To Reproduce
See in official view https://swiffyslider.com/configuration/?slider-item-show=slider-item-show2&slider-indicators-highlight=slider-indicators-highlight&slider-indicators-sm=slider-indicators-sm&preview-style=preview-images

Expected behavior
clicking indicator should selected current indicator

Screenshots

Additional context

Screen.Recording.2024-08-01.at.7.11.23.PM.mov

[waleedarshad]

@nicped @misterwinther @aimeos @sasham43 anyone can provide guidance?

[hexabinaer]

Oh yes, that's right. In fact the first 4 indicators are highlighted correctly but from no 5 on it's one indicator ahead. Obviously the 5th li item in that example does not have a class attribute (unlike the others with an empty class attribute).

https://swiffyslider.com/configuration/?slider-item-show=slider-item-show2&slider-indicators-highlight=slider-indicators-highlight&slider-indicators-sm=slider-indicators-sm&preview-style=preview-images

However, this must be an issue with the demo markup.

I checked back in several projects where we are using Swiffy Slider, cannot reproduce.

[waleedarshad]

@hexabinaer I am using same slider and I am having issue with desktop version. mobile version work fine.

Are you sure it is not an issue with latest version? @nicped can you confirm? Also is demo broken?

[nicped]

The number of indicators should match the number of pages. The test page does not take that into account.
So the test page has 9 images/slide items, and if you set the slider to show 2 slides per page you would need math.abs(9/2) = 5 indicators.

The indicators will set the active one to the page number the slider is currently on, hence the 1-4 situation.

I will see if I can change the logic so it will take a percentage of pages and apply it to the indicator that matches that.

But basically - just adjust the number of indicators to the number of pages. Use responsive CSS to have 2 or more sets of indicators if the number of slides per page changes with your viewport