search

dynamicweb / swiffy-slider

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

selected Indicator is not working correctly on desktop #99

Open waleedarshad opened 1 month ago

waleedarshad commented 1 month ago

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 Screenshot 2024-08-01 at 7 14 05 PM

Additional context

https://github.com/user-attachments/assets/57bd95b6-d2b9-4942-8a23-954f97ad1eb1

waleedarshad commented 1 month ago

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

hexabinaer commented 1 month ago

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 commented 1 month ago

@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 commented 1 month ago

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