Slider

Available as: Web ComponentShortcodeOxygen Element

A slider is a revolving carousel that displays photos or other types of content.

<spx-slider lazy style="width: 100%; height: 100%;" navigation gap="10" slides-per-view="1.5" centered-slides pagination-bullets-background="white" pagination-bullets-background-active="var(--tf-active)" max-height="400px"> {% for item in example.images %} <img src="{{ item }}" alt="" /> {% endfor %} </spx-slider>
<spx-slider lazy style="width: 100%; height: 100%;" navigation gap="10" slides-per-view="1.5" centered-slides pagination-bullets-background="white" pagination-bullets-background-active="var(--tf-active)" max-height="400px" lightbox spx-lightbox='{"overlay-background":"rgba(255,0,0,0.5)"}' spx-lightbox-slider='{"slides-per-view":"2","gap":"20"}'> {% for item in example.images %} <img src="{{ item }}" alt="" /> {% endfor %} </spx-slider>

Properties

autoheight

Type: booleanDefault: false

Automatically adjusts height of slider.

autoplay

Type: booleanDefault: false

Starts navigating to the next slide when page is loaded.

autoplay-delay

Type: numberDefault: 6000

Autoplay delay.

autoplay-disable-on-interaction

Type: booleanDefault: false

Disable autoplay after interaction with slides.

centered-slides

Type: booleanDefault: false

Centers slides in viewport.

effect

Type: stringDefault: slideChoices: slide, effect

Slider effect.

gap

Type: numberDefault: 0

Space between slides.

image-object-fit

Type: stringDefault: coverChoices: fill, contain, cover, scale-down, none

Image object-fit.

image-size

Type: string

WordPress media size when using the helper function.

image-src

Type: stringDefault: acfChoices: acf, mb

Gets images from an ACF or Metabox field.

images

Type: string

Gets images from an ACF or Metabox field.

keyboard

Type: booleanDefault: false

Control slider with arrow key when it is in viewport.

lazy

Type: boolean

Lazy load images.

lazy-load-prev-next

Type: number

Amount of images to to be preloaded when lazy is enabled.

lightbox

Type: boolean

Will open images in a lightbox on click. Use 'spx-lightbox' and 'spx-lightbox-slider' properties and adjust its settings.

loop

Type: boolean

Loops all slides infinitely.

max-height

Type: stringCSS Variable: --spx-slider-max-height

navigation

Type: booleanDefault: true

navigation-backdrop-filter

Type: stringDefault: var(--spx-backdrop-filter)CSS Variable: --spx-slider-navigation-backdrop-filter

navigation-background

Type: stringDefault: rgba(0,0,0,0.7)CSS Variable: --spx-slider-navigation-background

navigation-background-hover

Type: stringDefault: rgba(0,0,0,1)CSS Variable: --spx-slider-navigation-background-hover

navigation-border-radius

Type: stringDefault: var(--spx-border-radius)CSS Variable: --spx-slider-navigation-border-radius

navigation-color

Type: stringDefault: #ffffffCSS Variable: --spx-slider-navigation-color

navigation-distance-x

Type: stringDefault: 12pxCSS Variable: --spx-slider-navigation-distance-x

Navigation distance.

navigation-icon-next

Type: stringDefault: arrow-forward

Navigation icon type.

navigation-icon-prev

Type: stringDefault: arrow-back

Navigation icon type.

navigation-icon-type

Type: stringDefault: ionicons

Navigation icon type.

navigation-padding

Type: stringDefault: 12pxCSS Variable: --spx-slider-navigation-padding

navigation-size

Type: stringDefault: 20pxCSS Variable: --spx-slider-navigation-size

Navigation size.

pagination

Type: stringDefault: bulletsChoices: bullets, none

Pagination type.

pagination-backdrop-filter

Type: stringDefault: var(--spx-backdrop-filter)CSS Variable: --spx-slider-pagination-backdrop-filter

pagination-background

Type: stringDefault: rgba(0,0,0,0.7)CSS Variable: --spx-slider-pagination-background

pagination-bullets-background

Type: stringDefault: var(--spx-color-gray-500)CSS Variable: --spx-slider-pagination-bullets-background

pagination-bullets-background-active

Type: stringDefault: #ffffffCSS Variable: --spx-slider-pagination-bullets-background-active

pagination-bullets-clickable

Type: boolean

Make bullets clickable.

pagination-bullets-dynamic

Type: booleanDefault: false

Will only keep a selected amount of bullets visible.

pagination-bullets-dynamic-amount

Type: numberDefault: 5

Amount of dynamic bullets.

pagination-bullets-gap

Type: stringDefault: 6pxCSS Variable: --spx-slider-pagination-bullets-gap

Space between the bullets.

pagination-bullets-size

Type: stringDefault: 6pxCSS Variable: --spx-slider-pagination-bullets-size

Size of the bullets.

prev-next-filter

Type: stringCSS Variable: --spx-slider-prev-next-filter

Filter property for the previous and next elements.

slide-message-first

Type: stringDefault: This is the first slide

Screen reader message for first slide.

slide-message-last

Type: stringDefault: This is the last slide

Screen reader message for last slide.

slide-message-next

Type: stringDefault: Next slide

Screen reader message for next slide.

slide-message-previous

Type: stringDefault: Previous slide

Screen reader message for previous slide.

slides-per-view

Type: numberDefault: 1

Amount of slides shown at once.

speed

Type: numberDefault: 1000

Sliding speed.

spx-lightbox

Type: string

Pass attributes to the inner <spx-lightbox> component using a JSON string: { "overlay-background": "red" }

spx-lightbox-slider

Type: string

Pass attributes to the inner <spx-slider> component using a JSON string: { "slides-per-view": "2.5" }

start

Type: number

At which slide component should start.

Slots

inner

Slot (between HTML tag).

Events

spxSliderDidLoad

Fires after component has loaded.