Slideshow

Available as: Web ComponentShortcodeOxygen Element

Continuously playing slideshow.

<spx-slideshow gap="12px" height="150px" object-fit="cover"> {% for item in example.images %} <img src="{{ item }}" alt="" /> {% endfor %} </spx-slideshow>
<spx-slideshow gap="12px" height="150px" object-fit="cover" 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-slideshow>

Properties

duration

Type: stringDefault: 60sCSS Variable: --spx-slideshow-duration

Duration of slideshow to complete one cycle.

gap

Type: stringDefault: 1emCSS Variable: --spx-slideshow-gap

Gap between inner elements.

height

Type: stringCSS Variable: --spx-slideshow-height

image-size

Type: string

WordPress media size when using the helper function.

image-src

Type: stringChoices: acf, mb

Gets images from an ACF or Metabox field.

images

Type: string

Gets images from an ACF or Metabox field.

lazy

Type: boolean

Lazy load images.

lightbox

Type: boolean

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

max-width

Type: stringDefault: 300pxCSS Variable: --spx-slideshow-max-width

Max width of inner elements.

object-fit

Type: stringDefault: containCSS Variable: --spx-slideshow-object-fit

overflow

Type: stringCSS Variable: --spx-slideshow-overflow

If not set with this attribute, overflow should be set on the parent element.

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" }

Slots

inner

Slot (between HTML tag).

Events

spxSlideshowDidLoad

Fires after component has loaded.