Options affecting the indicators and their styling.
Indicators are used to show on what slide or page the slide deck is on
By default indicators are hidden on smaller screens (width < 993px) because the number of slides usually changes on that viewport.
Indicator position are calculated using percentages and it is possible to have any number of indicators to any numbers of slides.
There can be multiple indicator instances (
.slider-indicators) per Swiffy Slider instance - i.e. one for small devices with one indicator for each slide and another with one indicator for each page containing
Standard indicators that changes dark using css invert
Places the indicators outside the slider instance using negative margins - meaning it does not push the following elements
Dark, outside, Round
.slider-indicators-dark .slider-indicators-outside .slider-indicators-round
Dark, outside, Round, Highlight
.slider-indicators-dark .slider-indicators-outside .slider-indicators-round .slider-indicators-highlight
Dark, Square, outside, highlighted
.slider-indicators-dark .slider-indicators-outside .slider-indicators-square .slider-indicators-highlight
Standard, visible on small devices (<993px)
By default indicators are not shown on small devices. This option enables on small devices
Indicators - responsive and multiple
Show indicators on small devices (<993px)
By default indicators on small devices are hidden, but it is possible to show the indicators on small devices as well.
On small devices multiple slides per page changes to one slide per page and then the indicators have to change accordingly.
This Swiffy Slider instance has 2 slider indicator elements. One for larger devices and one for small devices (<993px). On larger devices, 2 slides per page is shown and on small devices one slide per page. This requires 2 sets of indicators to be configured with different number of indicators.
This example also moves the indicator options to the
.slider-indicators element (instead of the
.swiffy-slider element) which allows for different settings on different