Video Slider

Tutorial Video

Setup

WIDGET PLACEMENT

• Drop the Video Slider widget on your page. We suggest placing the widget in a new row.
• Determine the width you would like the slider to have. This slider may be used in fixed or full width. Unless you’ve placed the widget into a row that has previously been set to full width, the slider will be fixed width by default.
• For a full width slider display, click on the row the widget is placed in, and select “edit design”. Then enable “Full Bleed Row”.
  

WIDGET OPTIONS (CONTENT)

• Open the widget option panel by clicking on the widget.
• Unique ID: As with many widgets, a unique ID is necessary when using multiple widgets on the same page.
• Videos / List Items: The “List Items” represent individual slides in your slider. Click one to open additional options…
• Direct Video Link: Enter the URL for the video. Videos from YouTube, Vimeo and vzaar are supported.

Note that vzaar videos require playback mode to be set to “Within Container”

• Custom Poster: This option allows you to use a custom thumbnail for the video slide. If no custom image is used, the default video thumbnail will be used (this comes from the video service, YouTube/Vimeo/vzaar). When possible, we suggest using a custom thumbnail, as this will result in  a sharper thumbnail image.
• Carousel Height: Sets the height of the slider.
• Videos to Display at Once: This setting determines the number of slides seen at the same time. The default is one, however, you may display more than one slide at a time to achieve a carousel style display. See Centered Slide setting below for additional tips on carousel display.

Note that Lightbox playback mode should be used when multiple videos are displayed at once.

• Playback Mode: When a video is played, it can be played within the slideshow container, or in a lightbox.
• Autoplay Video: This setting enables automatic playback of video.

Note that automatic video playback is restricted in some browsers

• Loop Slideshow: As the title implies, this setting loops the slideshow so that it repeats.
• Enable Centered Slide: This setting is useful for carousel style sliders. A good way to utilize this feature is to use an even number of slides (such as two). When this setting is enabled, and two slides are displayed at once, one image will be centered, while only a portion of the previous and next slides are shown. The way the math is calculated is 1 (center slide) + 2 halves (previous and next slides) = 2. Sliders with an odd number of slides visible will always have a centered slide. Even number of slides without Enable Centered Slide enabled:
  
  Even number of slides with Enable Centered Slide enabled:
  
• Margin Between Slides: Sets the space between slides.
• Slide Transition Duration: Sets the time it takes for slide transitions to complete
• Autoplay Slides: This opens an additional option panel with the following options…
• Time Between Slides: Sets the time between slide transitions.
• Pause on Hover: Pauses slideshow while hovering over slide.
• Navigation Settings: This opens an additional option panel with the following options…
• Previous and Next Button Navigation: Displays previous and next arrow buttons, and enables their use for navigation.
• Pagination Dot Navigation: Displays pagination dots, and enables their use for navigation.

WIDGET OPTIONS (DESIGN)

In the Design section, you will find settings that control the styling for navigation styling, video player background color, and more. Individual parameters will not be explained in detail here, as the labels are self explanatory.