You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Context:
In v4.1.4 I implemented a standard autplaying carousel, that also uses a progress bar. I'm also using the reducedMotion: setting to disable the autplaying features all together (per standard) if a user has already made that choice (in the OS or the browser) prior to visiting my site, I don't need to bug with moving elements. Which works like a charm so far.
Except for one little 'annoyance' in the progress indicator, due to it being auto-generated by its markup when present (which works so far) and no option (at least I didn't find anything about that in the docs, if I should have missed it, just point me to it) to disable it in certain occasions, such as when disabling autoplay at all on reducedMotion.
Optimal would be play/pause toggles, alas in this case the slides in question are rather small and I don't have sufficient space (especially in smaller viewports) to fit all the buttons neatly, believe me, I tried. 😅
So, for now, I have the choice of either kicking the element off the DOM using JS and window.matchMedia or using the media query in CSS to make the element basically non existent, otherwise I'll have slightly annoying space below the carousel, where the progress bar would be.
Which, of course, isn't hard to do, but the solutions seem like a workaround for something the library could maybe improve and do as an option, similar to the option to disable the arrows.
Like so:
newSplide('',{autoplay: true,progressBar: true,// Does mount progress bar to the slides// further options for your slidesreducedMotion: {autoplay: false,progressBar: false,// Doesn't mount progress bar to the slides},}).mount();});
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Hi!
Context:
In v4.1.4 I implemented a standard autplaying carousel, that also uses a progress bar. I'm also using the
reducedMotion:
setting to disable the autplaying features all together (per standard) if a user has already made that choice (in the OS or the browser) prior to visiting my site, I don't need to bug with moving elements. Which works like a charm so far.Except for one little 'annoyance' in the progress indicator, due to it being auto-generated by its markup when present (which works so far) and no option (at least I didn't find anything about that in the docs, if I should have missed it, just point me to it) to disable it in certain occasions, such as when disabling autoplay at all on
reducedMotion
.Optimal would be play/pause toggles, alas in this case the slides in question are rather small and I don't have sufficient space (especially in smaller viewports) to fit all the buttons neatly, believe me, I tried. 😅
So, for now, I have the choice of either kicking the element off the DOM using JS and
window.matchMedia
or using the media query in CSS to make the element basically non existent, otherwise I'll have slightly annoying space below the carousel, where the progress bar would be.Which, of course, isn't hard to do, but the solutions seem like a workaround for something the library could maybe improve and do as an option, similar to the option to disable the
arrows
.Like so:
Beta Was this translation helpful? Give feedback.
All reactions