Slider

Available as: Web ComponentShortcodeOxygen Element

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

<spx-slider max-height="350px" max-width="350px" navigation> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/andre-benz-RRshxnCn8Lk-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/beasty--HxIhfS_dUk-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/domenico-loia-BkEF69vp3Ck-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/erol-ahmed-FTy5VSGIfiQ-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/ian-dooley-aaAllJ6bmac-unsplash.jpg" /> </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.

bp-tabs

Type: string

Starts navigating to the next slide when page is loaded.

centered-slides

Type: booleanDefault: false

Centers slides in viewport.

direction

Type: stringDefault: 'horizontal'Choices: 'horizontal', 'vertical'

Slider direction.

effect

Type: stringDefault: 'slide'Choices: 'slide', 'effect'

Slider effect.

image-object-fit

Type: stringDefault: 'cover'Choices: 'fill', 'contain', 'cover', 'scale-down', 'none'

Image object-fit.

image-size

Type: string

WordPress media size when using the helper function..

images

Type: string <?php spx\Get::gallery($fieldName, $type) ?>

Gets images from an ACF or Metabox field.

images-src

Type: stringChoices: 'acf', 'mb'

Gets images from an ACF or Metabox field.

loop

Type: booleanDefault: false

Loops all slides infinitely.

max-height

Type: stringDefault: '100%'

Max height.

max-width

Type: stringDefault: '100%'CSS variable: --spx-slider-max-width

Max width.

navigation

Type: boolean

navigation-background

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

Navigation background.

navigation-border-radius

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

Navigation radius border.

navigation-color

Type: stringDefault: '#ffffff'CSS variable: --spx-slider-navigation-color

Navigation color.

navigation-distance-x

Type: stringDefault: '12px'CSS 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: '12px'CSS variable: --spx-slider-navigation-padding

Navigation padding.

navigation-size

Type: stringDefault: '20px'CSS variable: --spx-slider-navigation-size

Navigation size.

pagination

Type: stringDefault: 'bullets'Choices: 'bullets', 'tabs', 'none'

Pagination type.

pagination-bullets-background

Type: stringDefault: 'var(--spx-color-gray-300)'CSS variable: --spx-slider-pagination-bullets-background

Pagination bullets background.

pagination-bullets-background-active

Type: stringDefault: 'var(--spx-color-gray-900)'CSS variable: --spx-slider-pagination-bullets-background-active

Pagination bullets active background.

pagination-bullets-clickable

Type: boolean

Make bullets clickable.

pagination-bullets-dynamic

Type: boolean

Will only keep a selected amount of bullets visible.

pagination-bullets-dynamic-amount

Type: numberDefault: 5

Amount of dynamic bullets.

pagination-bullets-size

Type: stringDefault: '8px'CSS variable: --spx-slider-pagination-bullets-size

Size of the bullets.

pagination-bullets-space-between

Type: stringDefault: '4px'CSS variable: --spx-slider-pagination-bullets-space-between

Space between the bullets.

pagination-tabs-gap-max

Type: numberDefault: 1.8

pagination-tabs-gap-min

Type: numberDefault: 1

pagination-tabs-inner-gap-max

Type: numberDefault: 1

pagination-tabs-inner-gap-min

Type: numberDefault: 0.8

pagination-tabs-margin-bottom-max

Type: numberDefault: 2.6CSS variable: --spx-slider-pagination-tabs-margin-bottom-max

Pagination tabs max margin-bottom.

pagination-tabs-margin-bottom-min

Type: numberDefault: 1.4CSS variable: --spx-slider-pagination-tabs-margin-bottom-min

Pagination tabs min margin-bottom.

pagination-tabs-max-width

Type: stringDefault: '320px'CSS variable: --spx-slider-pagination-tabs-max-width

Pagination tabs max-width.

pagination-tabs-padding-max

Type: numberDefault: 1.4CSS variable: --spx-slider-pagination-tabs-padding-max

Pagination tabs max padding.

pagination-tabs-padding-min

Type: numberDefault: 1CSS variable: --spx-slider-pagination-tabs-padding-min

Pagination tabs min padding.

pagination-transition-duration

Type: stringDefault: 'var(--spx-transition-duration)'CSS variable: --spx-slider-pagination-transition-duration

Pagination transition-duration.

pagination-transition-timing-function

Type: stringDefault: 'var(--spx-transition-timing-function)'CSS variable: --spx-slider-pagination-transition-timing-function

Pagination transition-timing-function.

prev-next-filter

Type: string

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.

space-between

Type: number

Space between slides.

speed

Type: numberDefault: 1000

Sliding speed.

Events

spxSliderDidLoad

Fires after component has loaded.

Methods

reload

Reload component.