PowerPack – Before And After Image Slider


Before and After Image Slider is a very simple module that makes it easy to highlight the visual differences between two images.


Here you will find the main features which are included in ‘Before and After Image Slider’ Plugin.

  1. Responsive – fully responsive layout
  2. Mobile Friendly – support for touch devices like phones and tablets
  3. Shortcode – add shortcodes easily
  4. Different Orientations – use horizontal and vertical orientations
  5. Custom Labels – set any labels text
  6. Offset – A offset ie How much of the before image is visible when the page loads.
  7. Multiple Views – create unlimited views on on one page


Installation of Before and After Image Slider requires a few clicks. To install the plugin, please use the following steps:

Before and After Image Slider should now be installed successfully!

Getting started

Before After image Slider adds a menu tab in Powerpack Menu with the name “Before & After image Slider” where you can customize the link as per your need with beautiful shortcode. Screen shows “Before & After image Slider” tab in the left side.


How to display shortcode


Template Code – If you want to display with your theme template.

<?php echo do_shortcode('[pwpc_bais]'); ?>

Complete Shortcode with Various Parameters

Shortcode : [pwpc_bais]

  • Before Image:
    [pwpc_bais before_img=""]
    Enter before image URL.

  • After Image:
    [pwpc_bais after_img=""]
    Enter after image URL.

  • Before_Label:
    [pwpc_bais before_label="Before"]
    Enter before label name.

  • After_Label:
    [pwpc_bais after_label="Before"]
    Enter after lable name.

  • Orientation:
    [pwpc_bais orientation="horizontal"]
    Two type of orientation 1) horizontal 2) Vertical.

  • Offset:
    [pwpc_bais offset="0.5"]
    You can set offset. By default offset value is “0.5”.

  • Width:
    [pwpc_bais width=""]
    You can set width. By default width value is “100%”.