Before After Image Slider & Gallery – BEAF Pro

Here is an example of how to configure Before After Image Slider & Gallery - BEAF Pro:

General Settings

beaf_pro_slider_enabled = true;
beaf_pro_slider_type = "slider";
beaf_pro_slider_transition = "easeInOut";
beaf_pro_slider_duration = 3000;
beaf_pro_slider_loop = true;
beaf_pro_slider_align = "center";

Before and After Images Settings

beaf_pro_images_settings = array(
    array(
        "before" => "path/to/your/before/image1.jpg",
        "after" => "path/to/your/after/image1.jpg",
        "title" => "Example 1",
        "description" => "This is an example of how to use BEAF Pro"
    ),
    array(
        "before" => "path/to/your/before/image2.jpg",
        "after" => "path/to/your/after/image2.jpg",
        "title" => "Example 2",
        "description" => "Another example of how to use BEAF Pro"
    )
);

Slider Navigation Settings

beaf_pro_navigation_settings = array(
    "prev_text" => "Previous",
    "next_text" => "Next",
    "close_text" => "Close"
);

Slider Overlay Settings

beaf_pro_slider_overlay_settings = array(
    "overlay_background" => "#000000",
    "overlay_opacity" => 0.7,
    "overlay_font_color" => "#ffffff"
);

Responsive Settings

beaf_pro_responsive_settings = array(
    "tablet_breakpoint" => 768,
    "mobile_breakpoint" => 480
);

Animation Settings

beaf_pro_animation_settings = array(
    "before_transition" => "zoom",
    "after_transition" => "slide"
);

Miscellaneous Settings

beaf_pro_misc_settings = array(
    "loading_animation" => "bar",
    "error_text" => "Error loading image"
);

Here are the features of the Before After Image Slider & Gallery plugin, BEAF Pro:

Multiple layout: Display Sliders in Horizontal or Vertical Layout.

10 Preview Styles: The Pro version includes 10 Additional Awesome looking Preview Styles.

Three Images Before After Slider: Create Before After slider with 3 images.

Before After Image Watermark: Create a Before After Slider with Watermark in Images.

Before After Video Slider: Create a Before After Slider with 2 different videos.

Single Image Slider: Create Before After slider using a single image.

Preview Image Without Login: Upload before after images, and see a live preview in before after slider.

Filterable Before – After Gallery: Create 2 Columns, 3 Columns, and 4 Columns Filterable Before After Gallery in WordPress with BEAF Pro.

Before – After Gallery: Create 2 Columns, 3 Columns, and 4 Columns Before After Gallery in WordPress with BEAF.

Auto Slider: Slider will slide automatically. Options to add Pause on hover.

On Scroll Slider: Slider will slide on Scroll (based on User Scrolling).

Pre-Loader: You can easily change the Label of Before-After to something you want from BEAF’s Option panel.

Label Color Change: You can easily change the color and background of each Label.

Disable Overlay: You can disable the overlay from the options panel.

Mouse Hover: You can move slider on Mouse hover.

Before After Image Alt tag: You can add Alt tag on each images for Better SEO.

Easy-to-use Option Panel: BEAF has built in easy-to-use option panel. You can add or remove any options from this panel.

Shortcode Generator: After your publish, a shortcode will generate so that you can publish the slider anywhere on your website.

Additional Addons: BEAF has couple of Pro Addons:

• Watermark Addon
• 3 Images Slider Addon
• Before After Video Slider Addon

Responsive and Touch Compatibility: BEAF is fully responsive and also supports touch on mobile devices.

Lightweight: The plugin is so lightweight that it won’t impact much on your speed.

Speed optimized: Compatible with any lazy load plugins. It also works with WEBP images.

Unlimited Slider: You can create unlimited number of slider

SEO Friendly: Support WP Image alt as image alt and title. Also, no custom fields are created.

Live Preview: See the preview of the slider/gallery while editing.

Widget Support: Add before-after through widgets.

Flexible Image: You can use any image size.

Supported Page Builders: BEAF is compatible with popular page builders:

• Elementor Page Builder
• WP Bakery / Visual Composer
• Divi Page Builder
• Beaver Builder
• Gutenberg / WP Default Block Editor

Changelog: The plugin has a changelog that lists all the updates, bug fixes, and new features added.

Note that some of the features may require the purchase of additional add-ons.