Before / After

[dt_fancy_title title="Follow navigation" title_align="left" title_size="h6" title_color="custom" separator_style="disabled" el_width="100" title_bg="enabled" separator_color="accent" custom_title_color="#ffffff"]
[dt_before_after image_1="35177" orientation="horizontal" navigation="move" offset="50" image_2="35178"]

GET SETTINGS

[dt_gap height="10" /]VC Element: "Before / After"

Choose first image: [add from Media Library]

Choose second border-image: [add from Media Library]

Orientation: Vertical

Navigation: Follow

Visible part of the "Before" image (in %): 50

[dt_gap height="10" /]

[dt_before_after image_1="35028" orientation="vertical" navigation="move" offset="70" image_2="35181"]

GET SETTINGS

[dt_gap height="10" /]VC Element: "Before / After"

Choose first image: [add from Media Library]

Choose second border-image: [add from Media Library]

Orientation: Horizontal

Navigation: Follow

Visible part of the "Before" image (in %): 70

[dt_gap height="10" /]

[dt_fancy_title title="Click and drag navigation" title_align="left" title_size="h6" title_color="custom" separator_style="disabled" el_width="100" title_bg="enabled" separator_color="accent" custom_title_color="#ffffff"]
[dt_before_after image_1="35027" orientation="horizontal" navigation="drag" offset="50" image_2="35180"]

GET SETTINGS

[dt_gap height="10" /]VC Element: "Before / After"

Choose first image: [add from Media Library]

Choose second border-image: [add from Media Library]

Orientation: Vertical

Navigation: Click and drag

Visible part of the "Before" image (in %): 50

[dt_gap height="10" /]

[dt_before_after image_1="35177" orientation="vertical" navigation="drag" offset="50" image_2="35178"]

GET SETTINGS

[dt_gap height="10" /]VC Element: "Before / After"

Choose first image: [add from Media Library]

Choose second border-image: [add from Media Library]

Orientation: Horizontal

Navigation: Click and drag

Visible part of the "Before" image (in %): 50

[dt_gap height="10" /]
0 / 5