search

dynamicweb / swiffy-slider

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

Bug when using slider-item-reveal on slider-item-show3+ #89

Closed rogierlegit closed 9 months ago

rogierlegit commented 9 months ago

Describe the bug When you create a swiffy slider with slider-item-reveal and slider-item-show2 it makes two of the list items visible, but if you use a value bigger than 2, it makes one more visible than indicated. So if you do slider-item-show4, 5 get made visible instead.

To Reproduce Steps to reproduce the behavior:

  1. Go to '...'
  2. Click the reveal option
  3. Set the amount of slides shown to 2
  4. See in the developer tools that 2 items are made visible
  5. Set the amount of slides shown to 3
  6. See in the developer tools that 4 items are made visible
  7. Set the amount of slides shown to 4
  8. See in the developer tools that 5 items are made visible
  9. Etc.

Expected behavior The same amount of items get made visible as you selected, for all amount of slides

Desktop (please complete the following information):

Additional context On my own site I also used slider-nav-animation, but that isn't required to reproduce the bug

nicped commented 9 months ago

This is related to when you have slider-nav-animation enabled - when that is enabled the JS will use an intersection observer that will set the class slide-visible to all 'visible' slides. Visible slides is by default the slides where 30 percent or more is visible, and depending on your viewport and the amount of slides you show.

The default threshold for for the intersection observer is 0.3 (30%) and you can fiddle with that value to not mark slides as visible in your use case. You can do that by adding the attribute data-slider-nav-animation-threshold to your swiffy-slider instance:

I.e. you can set the threshold to 0.2 meaning that the slide-visible will be set when 20% of the slide is visible:

<div class="swiffy-slider slider-item-show4 slider-item-reveal slider-nav-animation slider-nav-animation-appear" data-slider-nav-animation-threshold="0.2">

Read more on the attributes in the documentation: https://swiffyslider.com/docs/ in the Animation options section