search

dynamicweb / swiffy-slider

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

automatic and responsive indicators #67

Closed sKopheK closed 1 year ago

sKopheK commented 1 year ago

Is your feature request related to a problem? Please describe. could not find any solution where indicators are automatically and responsively generated according number of slides

Describe the solution you'd like calculate number of "pages" and insert the same amount of indicators to DOM accordingly

Describe alternatives you've considered none :)

Additional context currently it's hardcoded and thus not responsive

nicped commented 1 year ago

Hi - thank you for trying out Swiffy Slider.

I understand why you whish for this, but it will not be included in a future version.

The reason is that it would require DOM manipulation that would result in CLS causing degrading performance and potential issues with WCAG support and other bad things which I find unneeded and 'old fashioned'.

Usually the Swiifyslider resolves the number of slides in 2 viewports - mobile and larger than mobile and is responsive in both cases if your slide markup is.

It is fairly easy to create 2 (or more) indicator sections in the markup and hide and show them using CSS on the viewport - the examples on swiffys-slider.com is using Bootstrap, and BS and most other CSS frameworks supports showing and hiding elements in different viewports using their utility classes.

By default Swiffyslider will hide indicators on small devices (usually phones) because they show a scrollbar when scrolling and that helps the user to understand how far they are.

I know this is not the answer you were looking for, but hope you can use it.

sKopheK commented 1 year ago

hi, Nicolai, thanks for the answer. i believe the DOM manipulation would happen only on load and then viewport change and as the placeholder for indicators could (and maybe even should) have height fixed, CLS would not be an issue. as i'm not in control of number of slides and only know how many will be shown in different viewports (need to follow BS so there are currently 3-4 of them) i'll have to add a short JS snippet to do the trick.

nicped commented 1 year ago

On load is still too much DOM manipulation to my taste - the sickness of todays homepages and one reason for creating this project. IRL users of websites do not change viewports, and even if they do (when flipping their device), the html/CSS should take care of that - not JS. I am fully aware this is opinion based. I am not fan of fixing 'bad' things with more 'bad' things - i.e. adding fixed height to indicator placeholder to avoid CLS which only occurs because of other implementation choices that could be fixed at its core.

You might not know at development time how many slides are there - but at markup generation time - let it be server or client, you will know. Of course if you put this into a JS framework app, one more DOM manipulation would not make any difference.