sliders
Auto Rotate
Counters
Vertical With Reeling & Circle Counters
Sliders
You can add a .rwxu-flex-center helper class to the .rwx-slider-slide node to make all content in the slide vertically and horizontally aligned.
You can add a .--counter-circle class to the .rwx-slider node to make counters a circle (if data-rwx-slider-counters is specified).
Sliders are accessible - If a slider has counters, you can tab to them and use the left and right keys (up and down for data-rwx-slider-vertical) to navigate and the enter / space key to select.
Roseworx components have a scanDOM method which basically rescans the DOM for roseworx components and instantiates them. This is extremely useful for when you are dynamically / conditionally adding components to a page after the page load event or using Javascript frameworks like React or Vue. Simply run rwx.sliders.scanDOM().
Description
The Roseworx Slider Core Component allows you to break up different types of content into segmented slides and gives the user a more engaging and modern way to navigate that content, different from traditional methods. Sliders are responsive and accesible via keyboard navigation. Sliders can also be navigated programatically and give you the ability to add custom events for when slides are changed (useful for anayltics).
Usage
- Copy the html code and personalise it to your use case.
- slider functionality comes with the core files when you import rwx from 'roseworx' so you dont need to do anything extra. Any element with the rwx-slider attribute and that follows the correct html structure will automatically have functionality implemented.
- To customise the appearance of the slider change these SCSS Variables.
Additional Methods
In order to use the additional methods, a unique id attribute must be present on the [rwx-slider] element you are targeting. These must only be called on or after the window load event.
void
(
ID Of Slider Element: String
Number Of Slide: Number
)
Programtically change a slider element to a specified slide number.
rwx.sliders.goToSlide('idOfSlider', slideNumber);
void
(
ID Of Slider Element: String
Number Of Slide: Number
Event To Run On: 'slideShow' | 'slideHide'
Function To Run On Specified Event: Function
)
Run a specified function when a slider element has had its slide changed to OR from a specific slide number.
rwx.sliders.addEvent('idOfSlider', slideNumber, 'slideShow', ()=>{console.log("Slide Shown")});
rwx.sliders.addEvent('idOfSlider', slideNumber, 'slideHide', ()=>{console.log("Slide Hidden")});
Configuration Options
Optionally add any of these data attributes to the rwx-slider element to configure it a certain way.