Documentation

PowerPack – Before And After Image Slider

Introduction

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

Features:

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

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.

ba_image

How to display shortcode

[pwpc_bais]

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="http://www.domainname.com/image-1.jpg"]
    Enter before image URL.

  • After Image:
    [pwpc_bais after_img="http://www.domainname.com/image-2.jpg"]
    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%”.