Classes added to the controls (".swiper-controls") element.
Updates on breakpoint or orientation change.
The direction of the slider.
Default: "horizontal"
By default the slider is using a flex style. With this option the slider will use a grid style.
Label used for a hidden marker at the end of the slider. Can also be set trough the translations object of hylo-page-root.
Label used for a hidden marker at the beginning and the end of the slider. Can also be set trough the translations object of hylo-page-root.
Label used for a hidden marker at the beginning of the slider. Can also be set trough the translations object of hylo-page-root.
Defines the slider as list and is recognized as such by screen readers. Does not work on looped slider.
If set as string, the string is used as label of the list.
Should the slider loop. Be aware that this causes slides to be cloned which might create problems for wrapped WebComponents.
Does not create a looping slider but jumps to the first slide when at the last slider and moving to the next and jumping to the last slide when at the first slide and moving to the previous.
Classes added to the next element.
Same as "varsToOptions" only that the computed values will be converted into numbers (parseFloat). Has to be still a set of key/value pairs where the values are CSS VARIABLES!
As object or JSON string of the object.
e.g. {spaceBetween: "--padding"} or '{"spaceBetween": "--padding"}' as string
Also possible to set different settings for different breakpoints. Triggers an update on breakpoint change. A hylo-breakpoint-listener needs to be present.
e.g. {xs: {...}, default: {...}}
Options for SwiperJS API as object or JSON string of the object.
e.g. {slidesOffsetBefore: 0, slidesPerView: 1} or '{"slidesOffsetBefore": 0, "slidesPerView": 1}' as string
Also possible to set different settings for different breakpoints. Triggers an update on breakpoint change. A hylo-breakpoint-listener needs to be present.
e.g. {xs: {...}, default: {...}}
Options which will be added to the SwiperJS API options and as css variables to the hylo-slider component. To add the computed value of a "varsToOptions", "numbersToOptions" or "unitsToOptions" option as css variable, add the option to this object as well but with the value of false.
The keys will be prefixed with "--". Can be used like this in css:
As object or JSON string of the object.
e.g. {slidesPerView: 3, spaceBetween: false} or '{"slidesPerView": 3, "spaceBetween": false}' as string
Also possible to set different settings for different breakpoints. Triggers an update on breakpoint change. A hylo-breakpoint-listener needs to be present.
e.g. {xs: {...}, default: {...}}
By default items outside the slider width are hidden. When set, items outside the slider are shown.
If true, show the pagination. Will be placed inside the ".swiper-controls".
If set, the bulletins of the pager are clickable.
The auto play interval in milliseconds.
To set individuell intervals between slides, set the attribute "data-swiper-autoplay" on a slide.
Classes added to the previous element.
If set, the hylo-slide components are gonna have all the height/width (horizontal/vertical) of the biggest slide.
If true, show the scrollbar.
The scrollbar needs to be styled.
Shakes the active slide for a sec after the transition to it finished.
Can be set as boolean or as a comma separated string of breakpoints.
Shows a pause/play button. Will be placed inside the ".slider-controls" after the pager. Property "startPlay" needs to be set.
When used with hylo-nav and/or hylo-router, the autoplay should be "stopAutoplay()" on "componentWillDeactivate" (see hylo-nav, hylo-router).
Adds unstyled elements with the class "hylo-slider-previous" and "hylo-slider-next" before and after the slider area respectively. You are in charge of positioning and styling them correctly. Use the slots "previous" and "next" to fill the elements.
The previous and next element are link to the slidePrevious and slideNext methods.
Starts autoplay when loaded.
Stops a running auto play loop when the counter reaches 0. Counts down every time the slider starts over again.
Define the type of the slider.
Depending on the type, additional functionality or styles will be added to the slider. The type will be added as class to the component. (No types with additional functionality defined yet)
Same as "numbersToOptions" only that the computed numbers are multiplied by "--hylo-unit". Has to be still a set of key/value pairs where the values are CSS VARIABLES!
As object or JSON string of the object.
e.g. {spaceBetween: "--hylo-page-padding"} or '{"spaceBetween": "--hylo-page-padding"}' as string
Also possible to set different settings for different breakpoints. Triggers an update on breakpoint change. A hylo-breakpoint-listener needs to be present.
e.g. {xs: {...}, default: {...}}
Set of key/value pairs where the values are CSS VARIABLES! The css variables will be replaced with their computed values from the hylo-slider component. The transformed object will be added to the SwiperJS API options.
As object or JSON string of the object.
Also possible to set different settings for different breakpoints. Triggers an update on breakpoint change. A hylo-breakpoint-listener needs to be present.
e.g. {xs: {...}, default: {...}}
If set, the slider watches for window resizes and sets the css variable "--hylo-slider-width" with its width and calls for an update of the slider when a width change occurs.
Set to true for optimization if you will not change the scrollbar property in the future.
Returns the SwiperJS API. See https://idangero.us/swiper/api/ for all API options.
Fired when auto play starts.
Fired when auto play stops.
Fired when slide changed.
Fired when the slider and its SwiperJS API is initialised.
Fired when slider reached the end.
Fired when slider reached the beginning.
Fired when transition to next slide ends.
Fired when transition to next slide starts.
Fired when slide will change.
Same as "hyloSliderDidChange".
Same as "hyloSliderReachEnd".
Same as "hyloSliderReachStart".
Same as "hyloSliderTransitionEnd".
Same as "hyloSliderTransitionStart".
Same as "hyloSliderWillChange".
Same as "hyloSliderDidLoad".
Generated using TypeDoc
Creates a slider based on the SwiperJS API. Allows building styles depending on the options passed to the SwiperJS API and setting options based on the styles as well.
The order in which the options are getting applied is:
Latter options overwrite earlier.
You can set nested hylo-slide components to 'display: none;' for certain breakpoints. The hylo-slider takes care of adding/removing the correct slides depending on the current breakpoint. In order to work, a hylo-breakpoint-listener component needs to be present. Does not work for looped slider!
Used slots:
slidesPerView has to be set through one of the "options" properties.
Used css variables:
Requires SwipeJs: npm install swiper --save-dev
Update from earlier versions: