Page Builder 
Widgets Bundle 
SiteOrigin CSS 
Installer Image Slider
5 min read Updated
The Image Slider widget shows a set of images or videos, one frame at a time. Each frame can have a background image, a foreground image, a background color and background videos.
Requirements
The Image Slider widget is active by default. If it is not, go to PluginsSiteOrigin Widgets and activate Image Slider.
You can use the Image Slider widget in three places:
Page Builder: Add the SiteOrigin Slider widget to a Page Builder layout in the Classic Editor or in the SiteOrigin Layout block.
Block Editor: Add the SiteOrigin Image Slider block. It is in the SiteOrigin category of the block inserter.
Widget areas: Add the widget to any theme or plugin widget area.
The widget form has three sections: Slider frames, Controls and Design.
Slider frames
Click Add to add a frame. Click a frame to open it. Use the icons on the right of a frame to duplicate or delete it.
For a plain image slider, add one image to the Background image of each frame. The widget shows it as a normal image. If Height is empty, the image fills the slider width.
Background videos
Click Add below Background videos to add a video. Video files play muted.
Video file
Choose a video from the Media Library.
Video URL
An external video URL, such as a YouTube link. It overrides the Video file.
Autoplay
Autoplay can only be disabled for YouTube videos. This setting applies to embedded videos, such as YouTube. Video files always play automatically. Default: off.
Video format
The format of the video: MP4, WebM or Ogg. Default: MP4.
Frame settings
Loop slide background videos
Play the frame’s background videos in a loop. Default: off.
Background video opacity
A value from 0 to 100. Default: 100. A lower value lets the background image or color show through the video.
Background image
Choose an image from the Media Library, or enter an external image URL.
Background color
The frame background color. It shows behind transparent images and while images and videos load.
Background image type
Cover fills the frame with the image. Tile repeats the image at its own size. Default: Cover. This setting applies when the frame also has a Foreground image.
Foreground image
An image shown on top of the Background image, for example a text graphic. The widget never scales it above its own size. It scales down on small screens.
Destination URL
Makes the whole frame a link.
Open in new window
Opens the Destination URL in a new tab. Default: off.
How the Frame Images Work
- Background image only: the image shows as a normal image. This is a standard image slider.
- Background image and Foreground image: the Background image fills the frame (Cover) or repeats (Tile), and the Foreground image sits in the center on top of it.
- Background videos without a Foreground image: the video fills the frame. The Background image doesn’t show.
- Background videos with a Foreground image: the video plays behind the Foreground image. The Background image shows behind the video.
Controls
These settings apply to all frames. The autoplay and navigation settings apply when the slider has more than one frame.
Autoplay
Change frames automatically. Default: on.
Autoplay pause on hover
Pause autoplay while the pointer is over the slider. Appears when Autoplay is on. Default: off.
Animation speed
The length of the frame transition, in milliseconds. Default: 400.
Timeout
How long each frame shows, in milliseconds. Appears when Autoplay is on. Default: 8000.
Navigation color
The color of the arrows and pagination dots. Default: #FFFFFF.
Navigation style
The arrow style: Ultra thin, Thin, Medium, Thick, Rounded ultra thin, Rounded thin, Rounded medium or Rounded thick. Default: Thin.
Navigation size
The arrow size. Default: 25.
Always show navigation on desktop
Show the arrows and pagination dots at all times. By default, they show when the pointer is over the slider. Default: off.
Always show navigation on mobile
Show the arrows and pagination dots on mobile devices. By default, they are hidden on mobile, and visitors swipe between frames. Default: off.
Pagination alignment
The position of the pagination dots: Left, Center or Right. Default: Right.
Swipe control
Let visitors swipe between frames on touch devices. Default: on.
Unmute icon
Show a button that unmutes and mutes background videos. Default: off.
Unmute icon position
Top right, Bottom right, Bottom left or Top left. Appears when Unmute icon is on. Default: Top right.
Use FitVids
Scale embedded videos, such as YouTube, to fill the width of the frame and keep their aspect ratio. Default: on.
Show slide background videos on mobile
Show background video files on mobile devices that support autoplay. This only affects video files in frames that have a Foreground image. Other videos always show. Default: on.
Design
Height
The frame height. Leave it empty to use the image height. Use px values. Other units don’t size the image correctly at the moment.
Responsive Height
The frame height at and below the Responsive Breakpoint global setting (default 780px). Leave it empty to use the Height value.
Global Settings
Go to PluginsSiteOrigin Widgets and click Settings on the Image Slider widget.
Responsive Breakpoint
The screen width at which Responsive Height applies. Default: 780px. This is a widget setting. It is separate from the Page Builder Mobile Width setting.
SiteOrigin Premium
SiteOrigin Premium adds these features to the Image Slider widget:
- Lightbox: adds a Lightbox section. Enable Lightbox opens frame images in a lightbox and overrides the Destination URL. Album name groups images from several widgets into one lightbox. Disable caption for this lightbox hides the captions.
- Parallax Sliders: adds Parallax to Background image type.
- Multiple Media: select several images at once to create one frame for each image.
- Anchor ID: adds Add slide anchor ID in the URL and Anchor ID to Controls, so you can link to a frame.
