How to Create a Video Slider

Once you’ve installed and activated the WP Before After Image Slider, you can create your first comparison video slider by following these steps:

1. Access the Slider Menu

  • Log in to your WordPress dashboard.
  • Navigate to the Before After Sliders menu from the left sidebar.

2. Create a New Slider

  • Click the Add New button to start creating a new slider.
add new slider

3. Configure Content Settings

  • In the Content tab, enter a title for your slider.
  • Choose ‘Video’ slider type.
  • Select ‘Video Source’ such as YouTube Link or Upload Video

4. Add Videos

  • For a YouTube Link option, upload the Before YouTube Link and After YouTube Link. Set the start time and end time. Or choose the Upload Video option, add videos, and set timing.
add video slider

5. Customize Basic Options

  • Edit the labels if needed.

6. Adjust Slider Settings

  • Set the default divider offset.
  • Select interaction type (drag or hover).
  • Enable or disable overlay visibility.
  • Toggle Show Labels on or off.
  • Enable the Lazy Load option (Best Practice).
  • Enable or disable Badge / Watermark
  • Choose slider orientation (horizontal or vertical).
  • Select a slider template.
video slider settings
  • Enable or disable Loop Video and Autoplay to control video behavior.
  • Enable or disable the Auto Slider option. If enabled, you can set the animation duration and direction, and toggle the Pause on Hover option.
video slider auto play

7. Style Your Video Slider

Go to the Style tab to customize the design:

Overlay

  • Set background color or gradient.
style overlay

Handle

  • Customize arrow color, background, border, and style.
style handle

Divider

  • Adjust color and width.
style divider

Labels

  • Set alignment and orientation.
  • Customize text color, background, border, and padding.
style label

8. Preview

Go to the Preview tab to see the live preview of your video slider

video slider preview

9. Add Slider to Your Page

  • Copy the shortcode.
shortcode
  • Paste it into your post or page using the Shortcode block.
paste shortcode

10. Publish

  • Click Publish to make your slider live. 
slider publish
Was this page helpful?