Intro
Slider Package
A slim slider package that registers the slider on the global window by ID, allowing it to be accessed from anywhere. Use clear and consistent ID naming. If no predefined ID is required, we recommend using NanoIDs.
This does NOT use an external Libary.
Actions - slider
sliderInit
Initializes a Slider attached to the Window.
Arguments
slideTime Time in ms when a new slide is triggered. slideCount Slide Count autoplay Autoplay is activated (boolean) slideId GLOBAL - for Slider Identification. Slide Trigger also outside components. Recommendation: Use a global naming scheme for slider IDs to keep track of your individual sliders or use NANO ID if not. Events
onSlide Whole object to get Slider Data from. Start below to get an example. sliderNext / sliderPrev / sliderToggleAutoplay
Self Explanatory by the names.
Arguments
slideId GLOBAL - for Slider Identification. autoplay Boolean to toggle the autoplay
(only sliderToggleAutoplay Action)Events
onSlide Whole object to get Slider Data from. Start below to get an example.
How to make this playbar?
Set a CSS var in Nordcraft to the "percentage" value. Name this var "width". Then use "--width" in the CSS property "width". If you want to smooth this out you can give your inner playbar a css transition (linear 100ms).