How to Create a Two-Image Slider

Once you’ve installed and activated the WP Before After Image Slider, you can create your first comparison 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.
add new slider

2. Create a New Slider

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

3. Configure Content Settings

  • In the Content tab, enter a title for your slider.
  • Choose ‘Two Image Slider’ slider type.
set title and slider type

4. Add Images

  • For a two-image slider, upload the Before and After images.

5. Customize Basic Options

  • Edit the labels if needed.
  • Add Before and After Image Caption
  • Select your preferred image size.
add two images

6. Add Indicator (Optional)

  • Enable the indicator image option if you want to highlight specific areas.
  • Upload a transparent image for best results.

7. 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.
  • Optionally, enable popup view and set its position.
  • Enable or disable Auto Slider option. If enabled, you can set Animation Duration and Direction. Also, you can enable or disable the Pause on Hover option. 
two image slider settings

8. Style Your 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

9. Preview

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

two image preview

10. Add Slider to Your Page

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

11. Publish

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