Slideshow

Available as: Web ComponentShortcodeOxygen Element

Continuously playing slideshow.

<style> spx-slideshow img { height: 150px; object-fit: cover; width: 100%; } </style> <spx-slideshow gap="12px"> <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" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/jason-briscoe--T0La6F_WrE-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/jing-xi-lau-3ccEU_8ddog-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/leo-manjarrez--vygi0Cvz_c-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/michele-tardivo-UyiDcG_AXXs-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/mike-yukhtenko-Dv2n1Tv_WcI-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/mike-yukhtenko-NB9XC3h_jWo-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/nichlas-andersen-ZFXrgzHu1KU-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/niti-k-Ie430IZPF90-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/ryan-spencer-WJDR8_QxVR8-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/s-o-c-i-a-l-c-u-t-9b2KOWOP0OY-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/scott-webb-TYso4-CK-as-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-0_x2PkKmx1Q-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-0aFrSMJ3i-g-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-8FUD82rlJxs-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-93J0T3YU6io-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-GnHUOyPV0WI-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-Gruxs0ZQw7E-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-Km8L8QoJIq8-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-MO2tsiJ5Bek-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/zdenek-klein-mQAaKT4SuU4-unsplash.jpg" /> </spx-slideshow>

Properties

display

Type: stringDefault: 'block'CSS variable: --spx-slideshow-display

Component display property.

duration

Type: stringDefault: '60s'CSS variable: --spx-slideshow-duration

Duration of slideshow to complete one cycle.

gap

Type: stringDefault: '1em'CSS variable: --spx-slideshow-gap

Gap between inner elements.

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.

max-width

Type: stringDefault: '350px'CSS variable: --spx-slideshow-max-width

Max width of inner elements.

overflow

Type: stringCSS variable: --spx-slideshow-overflow

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

Events

spxSlideshowDidLoad

Fires after component has loaded.