Indicators

Slider indicators

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 multiple slides.

• Indicators
• Responsive indicators

Indicators

Standard

Standard indicators

Round .slider-indicators-round

Round indicators

Square .slider-indicators-square

Square indicators

Dark .slider-indicators-dark

Standard indicators that changes dark using css invert

Dark, outside .slider-indicators-dark .slider-indicators-outside

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) .slider-indicators-sm

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) .slider-indicators-sm

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 .slider-indicators elements