Create a responsive slider with customizable image and video frames, navigation, and appearance settings.
Requirements
To use this widget, go to PluginsSiteOrigin Widgets to activate the SiteOrigin Slider Widget.
The Slider Widget is ready to be used anywhere:
Page Builder: Insert widgets in Page Builder by SiteOrigin in either the Classic Editor or Page Builder Layout Block in the Block Editor.
Block Editor: 100% Block Editor compatible. Insert widgets using the SiteOrigin Widgets Block featuring a live widget search form.
Theme and Plugin Widget Areas: Insert widgets into any theme or plugin widget area.
Slider frames
Click the Add link to add your first frame (slide).
On the right of each frame, you’ll find three icons. The down arrow opens the frame, the page icon duplicates the frame, and the cross icon deletes the frame.
Once opened, you’ll find the following settings within each frame:
Background videos
Just as with the frame controls, use the Add button to add a new background video. The three icons on the right represent open, duplicate, and delete.
Within each video frame, you’ll find the following settings:
Video file
Use the Choose Media button to select or upload a video.
Video URL (optional)
An external URL of the video. Overrides the above video file setting.
Autoplay
Enable to autoplay the background video. Currently only available for YouTube videos.
Video format
Select the format of the video. Choose from MP4, WebM, or Ogg.
Once you’re done, you can click Add again to add a video with a different format if required.
Loop slide background videos
Enable to loop slide background videos.
Background video opacity
Adjust to produce an overlay effect. Lowering the background video opacity results in a darker overlay effect.
The background video is placed in much the same way as the background image. This means it’ll stretch out to fill the width of the container. It’ll play and automatically loop through the video. It’s important that you also use a background image when using a background video. This image will be displayed while the video is loading and it’ll be used on a fallback for mobile devices, which don’t allow auto-playing of background videos.
Below the Background Videos section, you’ll find the following settings:
Background image
Use the Choose Media button to select or upload a background image for your slider frame.
To the right of the Background image setting, you’ll find an External URL field. Use this field if you’d like to load your slide frame background image from an external URL instead of your media library. This field will not override the Choose Media field. If you’re loading an external image, the Choose Media field must be empty.
Background color
Select the slide frame background color. Visible if the background image is transparent or before the background image or video has loaded.
Background image type
Select the background image type. Choose between Cover, Tiled, or Parallax. Cover will cover the available space with the image. Tiled will maintain the image dimensions and repeat the image if the slider frame is larger than the image. Parallax is included in the SiteOrigin Premium Parallax Sliders addon.
Foreground image
Optionally select a foreground image to be displayed over the background image. Use the Choose Media button to select or upload a foreground image for your slider frame.
To the right of the Foreground image setting, you’ll find an External URL field. Use this field if you’d like to load your slide frame foreground image from an external URL instead of your media library. This field will not override the Choose Media field. If you’re loading an external image, the Choose Media field must be empty.
The Background image will form the background of the frame. The Slider Widget stretches this image out so that it fills the entire width of your slider, which in turn stretches to fill the width of its container (usually your page). You can choose how it does this by selecting either Cover or Tile for the Background Image Type.
The Foreground image is placed on top of the background image. It’ll never be stretched to any larger than the actual image size (but it will be scaled down for smaller screen devices). You’ll usually use this to overlay text on top of the background image.
If you want to use the slider as a standard image slider, without any overlays, you can just upload your images to the background image.
Destination URL
Enter a destination URL if you’d like to link the slider frame.
Open in a new window
Enable if you’d like to open the link in a new window.
Controls
Settings in the Controls section apply to all frames within the slider widget.
Autoplay
Enable to autoplay the slider.
Autoplay pause on hover
Enable to pause the slider when hovering.
Animation speed
Slider frame animation speed in milliseconds. The default is 800.
Timeout
How long each slider frame is displayed in milliseconds. The default is 8000.
Navigation color
Choose the color of the slider navigation elements, left/right arrows, and the lower slide navigation (dots).
Navigation style
Choose the navigation style; the available options are:
- Ultra Thin
- Thin (default option)
- Medium
- Thick
- Rounded ultra thin
- Rounded thin
- Rounded medium
- Rounded thick
Navigation size
The font size of the left/right slider navigation arrows. 25 is the default. The unit of measurement is pixels.
Always show navigation on desktop
Enable to always show slider navigation elements. Disable to show slider navigation elements on hover.
Always show navigation on mobile
By default, the slider navigation won’t be displayed on mobile devices. Users can navigate between slider frames by swiping. Enable to display navigation elements (arrows and dots) on mobile devices.
Swipe control
Allow users to swipe through frames on mobile devices. Default enabled.
Unmute icon
Slide background videos are muted. Enable to display an unmute/mute icon. Only applies to self-hosted videos.
Unmute icon position
This setting will be displayed if the Unmute icon setting is enabled. Choose between Top right, Bottom right, Bottom left, and Top left.
Use FitVids
FitVids will scale background videos to fill the width of the slide while maintaining aspect ratio.
Show slide background videos on mobile
Allow slide background videos to appear on mobile devices that support autoplay. Default disabled.
Design
Height
Set a slider height.
Responsive Height
Set a slider height for mobile devices. The Mobile Width can be adjusted at SettingsPage BuilderLayoutMobile Width.
Other Settings
Enable Lightbox
This will override the destination URL. The image will open in a lightbox when clicked on. The Lightbox Addon is available as part of SiteOrigin Premium.
Album name
If the Enable Lightbox setting is enabled, this setting will appear. Images with the same album name will be displayed together.
Disable caption for this lightbox
If the Enable Lightbox setting is enabled, this setting will appear. Enable to disable the lightbox image captions.