Slider Widget

To use the Slider widget, ensure it’s enabled in the Widgets Bundle dashboard at PluginsSiteOrigin Widgets. The Slider widget can be inserted into any theme widget area at AppearanceWidgets or any page or post using Page Builder. If you’re using the new Block Editor, the Slider widget can be inserted using a SiteOrigin Layout Block or a SiteOrigin Widget Block.

Basic Setup Video

Below you’ll find a video showing a basic setup of the SiteOrigin Slider widget using a background and foreground image.

Once the Slider widget has been inserted into your theme widget area or page/post using Page Builder or SiteOrigin Blocks, hover over it and click the Edit link to begin. You’ll find the following settings available:

Slider frames

Click the Add link to add your first frame (slide).

Click Add to create slider frames.

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.

Open, duplicate or delete.

Once opened, you’ll find the following settings within each frame:

Background videos

Slider frame background video section.

One of the most powerful features of the slider widget is how easy it makes adding background videos to your slider frames. This is a slightly more advanced feature. You do need to have a basic understanding of HTML5 video and the different video formats. MP4 is a widely supported HTML5 compatible video format. The only problem is that some browsers, namely Firefox, do not support it. This means you’ll usually need to upload your video in 2 formats. MP4 and something like OGG Video. You can read more about supported formats here.

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.

Maximum height
Set a background video maximum height. Only the pixel value is required. For example 500 will output a maximum height of 500px.

Once you’re done, click Add again to add a video with a different format. Unless of course, you’re only targeting one browser.

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 and foreground images might be slightly confusing. The background image will form the background of the frame. Slider Widget stretches this image out so that it fills the entire width of your slider, which in turns 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.

slider-background-foreground

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

Slider widget controls section.

Settings in the controls section apply to all frames within the slider widget.

Animation speed
Slider frame animation speed in milliseconds. The default is 800.

Timeout
How long each slider frame is displayed for in milliseconds. The default is 8000.

Navigation color
Choose the color of the slider navigation elments, 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 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.

Show slide background videos on mobile
Allow slide background videos to appear on mobile devices that support autoplay. Default disabled.

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.