Before After Image Slider Pro

Getting Started :

Before After image Slider adds a Menu tab in WP Admin side 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.

Shortcode Generator :

Check the Result of any Shortcode with Preview using “Shortcode Generator
Please Go To Admin Menu ->Admin Menu -> Before After Image Slider Pro -> Shortcode Generator.

Gutenberg Blocks :

Please go to page or post and add “Gutenberg Blocks“.

Before After Image Slider Shortcodes :

  1. before_img: Enter before image URL (E.g.:before_img=”http://www.domainname.com/image-2.jpg”)
  2. after_img: Enter after image URL (E.g.:after_img=”http://www.domainname.com/image-2.jpg”)
  3. orientation: Two type of orientation 1) horizontal 2) Vertical
    (E.g.:orientation=”horizontal”)
  4. offset: Enter offset (E.g.:offset=”0.5″)
  5. before_label: Enter before_label (E.g.:before_label=”Before”)
  6. after_label: Enter before_label (E.g.:after_label=”After”)
  7. Slider Width : Enter slider width. Leave empty for default. ( E.g 500px && 70% )
  8. Extra Class: You can add extra class here.
    Note: Extra class added as parent so using extra class you customize your design.

How To Display And Shortcodes :

Before After Image

[bafis_image]

You can also use template code to display button in your theme template.
<?php echo do_shortcode('[bafis_image]'); ?>

Template Structure + Overriding Templates Via A Theme:

The template files of before after image slider contain the markup and template structure for the front-end of your site. If you open these files you’ll notice they all contain many hooks which will allow you to add / move content without having to edit the template files themselves. This method protects even further against any upgrade issues as the template files can be left completely untouched.

Alternatively, you can edit these files in an upgrade safe way through overrides. Simply copy it into a directory within your theme named /before-after-image-slider-pro, keeping the same file structure.

Example : To override the before after image slider design file simply copy file from /before-after-image-slider-pro/templates/content.php to yourtheme/before-after-image-slider-pro/content.php

The copied file will now override the before after image slider default template file. Do not edit these files within the core plugin itself as they are overwritten during the upgrade process and any customizations will be lost.

The following template files can be found within the /before-after-image-slider-pro/templates/ directory: