Media Slider Element
The Media Slider Element shows images and videos one after another in a simple slideshow. Each slide is either an image, which can link to another page or open in a lightbox, or a video from the Vimeo, YouTube or Video elements.
It is a good fit for a small gallery of product photos, project pictures or a short series of clips, where visitors should see one item at a time without leaving the page. The slides can change on their own or by hand, and the slider can adapt its height to images of different sizes.
In this article: How To Use · Element Options · Slide Options · Tips · Related Elements · Example
How To Use The Media Slider Element
Add the Media Slider Element and create the slides one by one, or use Bulk Image Upload to select several images at once; each image becomes its own slide. For every slide choose the Slide Type, then the Image, or insert a video element or paste an embed code in Video Element or Embed Code.
To link an image slide, enter the address in Full Image Link or External Link and set the Link Target. For a larger view, turn on Lightbox and enter the address of the full-size image in the link field; all lightbox images of one slider open as one gallery.
The slideshow options are on the General tab of the slider. Autoplay and Smooth Height fall back to the slideshow settings in Global Options when left on Default; Slideshow Speed sets the time per slide in milliseconds. Hover Type adds a lift or zoom effect to the images, and Image Size Dimensions and Alignment set the size and position of the slider.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
General
| Heading | Description |
|---|---|
| Content | Enter some content for this slider. |
| Bulk Image Upload | This option allows you to select multiple images at once and they will populate into individual items. It saves time instead of adding one image at a time. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
| Alignment | Select the slider’s alignment. |
| Autoplay | Turn on to autoplay the slideshows. |
| Smooth Height | Turn on to enable smooth height on slideshows when using images with different heights. |
| Slideshow Speed | Controls the speed of slideshows for the slider element. for example 1000 = 1 second. |
| Hover Type | Select the hover effect type. |
| Image Size Dimensions | Dimensions in percentage (%) or pixels (px). |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
Slide Options
Each slide is an image or a video. Image slides can link to a page or open a larger version in the lightbox.
General
| Heading | Description |
|---|---|
| Slide Type | Choose a video or image slide. |
| Image | Upload an image to display. |
| Video Element or Embed Code | Click one of the buttons to insert the corresponding element, or paste your video embed code below. Vimeo tiaro_vimeo YouTube tiaro_youtube Video tiaro_video. |
| Full Image Link or External Link | Add the url of where the image will link to. If lightbox option is enabled, you have to add the full image link to show it in the lightbox. |
| Lightbox | Show image in lightbox. Lightbox must be enabled in Global Options or the image will open up in the same tab by itself. |
| Link Target | Controls how the link will open. |
Tips
- The image alt text comes from the Media Library. Fill in the alt text of each image there, so screen readers and search engines can describe the slides.
- Use images with the same aspect ratio. If they differ, turn on Smooth Height so the page below does not jump as the slides change.
- The lightbox needs the full image link in the slide’s link field, and the lightbox must be enabled in Global Options; otherwise the image opens on its own in the same tab.
- Links set to open in a new window get
rel="noopener noreferrer"automatically. - Slideshow Speed is in milliseconds: 1000 is one second. The default of 7000 gives visitors time to look at each slide.
