Media Slider Element

Last Update: March 12, 2024

The Media Slider Element is a simple element that allows you to display multiple images, and/or videos, into your site content. Read below to discover more about this useful visual element, and watch the video below for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Media Slider Element

The Media Slider Element allows you to add image and / or video sliders anywhere in your content. To start, simply add the element into your desired column.

There are both Parent Options, which affect the whole slider, and children options for the individual child items. The Parent options start with the Bulk Image Upload option, which allows you to add many images (slides) to your media slider in one go. You can always add more later. You can then choose from a range of options including margin, alignment, autoplay, smooth height, and more. You can even add the dimensions you want the images to display, in either pixels or percentages.

Once you have set all your Parent Options, you add Child Items. Click the pencil icon to edit the existing item. The Child Item Options Panel appears. This is where you add, and configure, the individual slides. The Slide Type option allows you to choose whether the slide shows an image or a video. If you choose video, you must add the Video Element or Video Embed Code into the field below. You can also enable Lightbox for the images in the Media Slider, but to do that, the full path of the image file must be added into the Full Image Link or External Link field. This can be a local or an external link. Finally, if you don’t enable Lightbox, there is an option for opening the image links in a new browser tab or the same one.

You can then duplicate existing slides to edit, or create new slides, by clicking on the Clone Item icon, or the + Slide button respectively.

Read below for a detailed description of all element options.

Parent Element Options

Note: Please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

HeadingDescription
Bulk Image UploadThis 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.
MarginEnter values including any valid CSS unit, ex: 4%.
AlignmentSelect the slider's alignment.
AutoplayTurn on to autoplay the slideshows.
Smooth HeightTurn on to enable smooth height on slideshows when using images with different heights.
Slideshow SpeedControls the speed of slideshows for the slider element. ex: 1000 = 1 second.
Hover TypeSelect the hover effect type.
Image Size DimensionsDimensions in percentage (%) or pixels (px).
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Child Element Options

HeadingDescription
Slide TypeChoose a video or image slide.
ImageUpload an image to display.
Video Element or Video Embed CodeClick the Youtube or Vimeo Element button below then enter your unique video ID, or copy and paste your video embed code. Add YouTube VideoAdd Vimeo Video.
Full Image Link or External LinkAdd 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.
LightboxShow image in lightbox. Lightbox must be enabled in Global Options or the image will open up in the same tab by itself.
Link TargetControls how the link will open.