013-9346624

Before & After Slider

Pamerkan foto sebelum & selepas anda dengan cara yang menakjubkan dan interaktif dengan modul Divi Pixel yang mudah digunakan ini. Gunakan Slider Sebelum & Selepas untuk memaparkan dua versi imej hanya dengan meluncur ke atasnya.



Vertical Direction

Choose vertical slider orientation and drag the slider up and down to see two versions of the image.

[dipi_before_after_slider before_image=”https://www.fastudio.my/wp-content/uploads/2024/10/bas-01.jpg” after_image=”https://www.fastudio.my/wp-content/uploads/2024/10/bas-02.jpg” direction=”vertical” handle_icon=”arrow” before_label_bg_color=”#FFFFFF” after_label_bg_color=”#FFFFFF” overlay_color=”rgba(0,0,0,0.2)” slider_width=”2px” handle_container_bg_blur=”10px” handle_circle_size=”45px” handle_circle_border_width=”2px” handle_icon_arrow_width=”2px” handle_icon_gap=”4″ handle_hover_icon_gap=”8″ handle_circle_size_tablet=”45px” handle_circle_size_phone=”35px” handle_circle_size_last_edited=”on|phone” handle_hover_icon_gap_tablet=”8″ handle_hover_icon_gap_phone=”6″ handle_hover_icon_gap_last_edited=”on|phone” _builder_version=”4.19.4″ _module_preset=”default” labels_font_size_tablet=”” labels_font_size_phone=”11px” labels_font_size_last_edited=”on|phone” labels_line_height_tablet=”” labels_line_height_phone=”2em” labels_line_height_last_edited=”on|phone” global_colors_info=”{}” theme_builder_area=”post_content”][/dipi_before_after_slider]


Horizontal Direction

Choose horizontal slider direction and drag the slider sideways to see two versions of the image.

[dipi_before_after_slider before_image=”https://www.fastudio.my/wp-content/uploads/2024/10/bas-03.jpg” after_image=”https://www.fastudio.my/wp-content/uploads/2024/10/bas-04.jpg” handle_icon=”arrow” before_label_bg_color=”#FFFFFF” after_label_bg_color=”#FFFFFF” overlay_color=”rgba(10,10,10,0.2)” slider_color=”#FFFFFF” slider_width=”2px” slider_handle_icon_color=”#FFFFFF” handle_container_bg_blur=”10px” slider_handle_color=”#FFFFFF” handle_circle_size=”45px” handle_circle_border_width=”2px” handle_icon_arrow_width=”2px” handle_icon_gap=”4″ handle_hover_icon_gap=”8″ handle_circle_size_tablet=”45px” handle_circle_size_phone=”35px” handle_circle_size_last_edited=”on|phone” _builder_version=”4.19.4″ _module_preset=”default” labels_font_size_tablet=”” labels_font_size_phone=”11px” labels_font_size_last_edited=”on|phone” labels_line_height_tablet=”” labels_line_height_phone=”2.5em” labels_line_height_last_edited=”on|phone” custom_css_dss_image_before=”filter: brightness(90%)” custom_css_dss_image_after=”filter: brightness(90%)” global_colors_info=”{}” custom_css_dss_label_before_last_edited=”on|phone” custom_css_dss_label_before_phone=”top: 80%;” custom_css_dss_label_after_last_edited=”on|phone” custom_css_dss_label_after_phone=”top: 80%;” theme_builder_area=”post_content”][/dipi_before_after_slider]


Custom Labels

Add your own labels text like shown below. Labels can be always displayed on the overlay or just on mouseover.

[dipi_before_after_slider before_image=”https://www.fastudio.my/wp-content/uploads/2024/10/bas-image.jpg” after_image=”https://www.fastudio.my/wp-content/uploads/2024/10/bas-image.jpg” handle_icon=”arrow” before_label=”Black & White” after_label=”Color Photo” before_label_bg_color=”#0a0a0a” after_label_bg_color=”#0a0a0a” overlay_color=”rgba(0,0,0,0.2)” overlay_visibility=”hide_on_hover” slider_color=”#0a0000″ slider_width=”2px” slider_handle_icon_color=”#FFFFFF” handle_container_bg_blur=”10px” slider_handle_color=”#0a0000″ slider_handle_bg_color=”#0a0a0a” handle_circle_size=”45px” handle_circle_border_width=”2px” handle_icon_arrow_width=”2px” handle_icon_gap=”5″ handle_hover_icon_gap=”8″ handle_circle_size_tablet=”45px” handle_circle_size_phone=”35px” handle_circle_size_last_edited=”on|phone” handle_icon_size_tablet=”” handle_icon_size_phone=”4px” handle_icon_size_last_edited=”on|phone” _builder_version=”4.19.4″ _module_preset=”default” labels_text_color=”#FFFFFF” labels_font_size_tablet=”” labels_font_size_phone=”11px” labels_font_size_last_edited=”on|phone” labels_line_height_tablet=”” labels_line_height_phone=”2em” labels_line_height_last_edited=”on|phone” custom_css_dss_image_before=”filter: grayscale(100%);” global_colors_info=”{}” custom_css_dss_label_before_last_edited=”on|phone” custom_css_dss_label_before_phone=”top: 80%;||padding: 5px !important;” custom_css_dss_label_after_last_edited=”on|phone” custom_css_dss_label_after_phone=”top: 80%;||padding: 5px !important;” theme_builder_area=”post_content”][/dipi_before_after_slider]


Slider Customization

Set slider style, and initial position and customize slider line and handle colors to fit your requirements.

[dipi_before_after_slider before_image=”https://www.fastudio.my/wp-content/uploads/2024/10/bas-05.jpg” after_image=”https://www.fastudio.my/wp-content/uploads/2024/10/bas-05.jpg” before_label=”Filtered” after_label=”No Filter” before_label_bg_color=”#0a0a0a” after_label_bg_color=”#0a0a0a” overlay_color=”rgba(10,10,10,0.2)” overlay_visibility=”hide_on_hover” offset=”27″ slider_color=”#0a0a0a” slider_width=”2px” slider_handle_icon_color=”#0a0a0a” handle_container_bg_blur=”0px” handle_use_circle=”off” handle_icon_size=”12px” handle_icon_gap=”0″ handle_hover_icon_gap=”8″ _builder_version=”4.19.4″ _module_preset=”default” labels_text_color=”#FFFFFF” labels_font_size_tablet=”” labels_font_size_phone=”11px” labels_font_size_last_edited=”on|phone” labels_line_height_tablet=”” labels_line_height_phone=”2.2em” labels_line_height_last_edited=”on|phone” custom_css_dss_image_before=”filter: hue-rotate(40deg);” global_colors_info=”{}” custom_css_dss_label_before_last_edited=”on|phone” custom_css_dss_label_before_phone=”top: 80%;||padding: 5px;” custom_css_dss_label_after_last_edited=”on|phone” custom_css_dss_label_after_phone=”top: 80%;||padding: 5px;” theme_builder_area=”post_content”][/dipi_before_after_slider]

Highly Customizable

Activate Slider on Hover or Click

[dipi_before_after_slider before_image=”https://www.fastudio.my/wp-content/uploads/2024/10/teeth-02.jpg” after_image=”https://www.fastudio.my/wp-content/uploads/2024/10/teeth-01.jpg” move_slider=”on_hover” handle_icon=”arrow” before_label_bg_color=”#FFFFFF” after_label_bg_color=”#FFFFFF” overlay_color=”rgba(0,0,0,0.25)” offset=”34″ slider_color=”#FFFFFF” slider_width=”2px” slider_handle_icon_color=”#FFFFFF” handle_container_bg_blur=”15px” slider_handle_color=”#FFFFFF” slider_handle_bg_color=”RGBA(255,255,255,0)” handle_circle_size=”50px” handle_circle_border_width=”2px” handle_icon_size=”8px” handle_icon_arrow_width=”2px” handle_hover_icon_gap=”10″ handle_circle_size_tablet=”50px” handle_circle_size_phone=”35px” handle_circle_size_last_edited=”on|phone” handle_icon_size_tablet=”8px” handle_icon_size_phone=”5px” handle_icon_size_last_edited=”on|phone” _builder_version=”4.19.4″ labels_font=”|||on|||||” labels_text_color=”#15022A” labels_font_size=”12px” labels_font_size_tablet=”12px” labels_font_size_phone=”10px” labels_font_size_last_edited=”on|phone” custom_css_dss_label_before=”border-radius: 0 50px 50px 0;||margin-left: -10px !important;” custom_css_dss_label_after=”border-radius: 50px 0 0 50px;||margin-right: -10px !important;” global_colors_info=”{}” theme_builder_area=”post_content”][/dipi_before_after_slider]
[dipi_before_after_slider before_image=”https://www.fastudio.my/wp-content/uploads/2024/10/dp-demo-26.jpg” after_image=”https://www.fastudio.my/wp-content/uploads/2024/10/dp-demo-25.jpg” direction=”vertical” before_label_bg_color=”#ffffff” after_label_bg_color=”#ffffff” overlay_color=”rgba(21,2,42,0.27)” slider_color=”#ff4200″ slider_handle_color=”#ff4200″ slider_handle_bg_color=”#ff4200″ handle_hover_icon_gap=”8″ _builder_version=”4.19.4″ labels_font=”|||on|||||” labels_text_color=”#15022a” labels_font_size_tablet=”” labels_font_size_phone=”11px” labels_font_size_last_edited=”on|phone” labels_line_height_tablet=”” labels_line_height_phone=”2.2em” labels_line_height_last_edited=”on|phone” box_shadow_style=”preset3″ global_colors_info=”{}” theme_builder_area=”post_content”][/dipi_before_after_slider]
[dipi_before_after_slider before_image=”https://www.fastudio.my/wp-content/uploads/2024/10/dp-demo-27.jpg” after_image=”https://www.fastudio.my/wp-content/uploads/2024/10/dp-demo-28.jpg” always_show_labels=”on” before_label_bg_color=”#15022a” after_label_bg_color=”#15022a” enable_overlay=”off” overlay_color=”rgba(21,2,42,0.27)” offset=”29″ slider_color=”#15022a” slider_handle_color=”#15022a” slider_handle_bg_color=”#15022a” handle_icon_size=”5px” handle_hover_icon_gap=”8″ _builder_version=”4.19.4″ labels_font=”Abel||||||||” labels_text_color=”#ffffff” box_shadow_style=”preset3″ global_colors_info=”{}” handle_circle_size__hover_enabled=”off|hover” theme_builder_area=”post_content”][/dipi_before_after_slider]

Before & After

With the Divi Pixel Before & After Slider, you can easily create a vertical or horizontal slider to compare 2 images in a few simple clicks.

[dipi_before_after_slider before_image=”https://www.fastudio.my/wp-content/uploads/2024/10/bas-06.jpg” after_image=”https://www.fastudio.my/wp-content/uploads/2024/10/bas-06.jpg” move_slider=”on_hover” handle_icon=”arrow” before_label=”Before Correction” after_label=”After Correction” always_show_labels=”on” before_label_bg_color=”#ffffff” after_label_bg_color=”#ffffff” enable_overlay=”off” slider_color=”RGBA(255,255,255,0)” slider_width=”0px” handle_container_bg_blur=”10px” handle_circle_size=”50px” handle_circle_border_width=”2px” handle_circle_border_style=”dashed” handle_icon_arrow_width=”2px” handle_hover_icon_gap=”8″ handle_circle_size_tablet=”50px” handle_circle_size_phone=”35px” handle_circle_size_last_edited=”on|phone” handle_icon_size_tablet=”” handle_icon_size_phone=”5px” handle_icon_size_last_edited=”on|phone” handle_icon_gap_tablet=”” handle_icon_gap_phone=”4″ handle_icon_gap_last_edited=”on|phone” handle_hover_icon_gap_tablet=”8″ handle_hover_icon_gap_phone=”6″ handle_hover_icon_gap_last_edited=”on|phone” _builder_version=”4.19.4″ _module_preset=”default” labels_font=”|||on|||||” labels_text_color=”#15022A” labels_font_size_tablet=”” labels_font_size_phone=”10px” labels_font_size_last_edited=”on|phone” labels_line_height_tablet=”” labels_line_height_phone=”2.6em” labels_line_height_last_edited=”on|phone” custom_css_dss_image_before=”filter: saturate(30%);” custom_css_dss_label_before=”top: 90%;” custom_css_dss_label_after=”top: 90%;” border_width_all_slider_line=”1px” border_color_all_slider_line=”#FFFFFF” border_style_all_slider_line=”dashed” global_colors_info=”{}” custom_css_dss_label_after_last_edited=”on|desktop” custom_css_dss_label_after_phone=”top: 80%;||letter-spacing: 0;” custom_css_dss_label_before_last_edited=”on|phone” custom_css_dss_label_before_phone=”top: 80%;||letter-spacing: 0;” custom_css_dss_label_after_tablet=”top: 90%;” custom_css_dss_label_before_tablet=”top: 90%;” theme_builder_area=”post_content”][/dipi_before_after_slider]
[dipi_before_after_slider before_image=”https://www.fastudio.my/wp-content/uploads/2024/10/bas-07.jpg” after_image=”https://www.fastudio.my/wp-content/uploads/2024/10/bas-08.jpg” direction=”vertical” handle_icon=”arrow” before_label_bg_color=”#ffffff” after_label_bg_color=”#ffffff” overlay_color=”rgba(10,0,0,0.27)” overlay_visibility=”hide_on_hover” offset=”70″ slider_color=”#FFFFFF” slider_width=”1px” slider_handle_icon_color=”#FFFFFF” handle_container_bg_blur=”15px” slider_handle_color=”#FFFFFF” slider_handle_bg_color=”RGBA(255,255,255,0)” handle_circle_size=”50px” handle_circle_border_width=”1px” handle_icon_size=”8px” handle_icon_arrow_width=”1px” handle_icon_gap=”5″ handle_hover_icon_gap=”8″ _builder_version=”4.19.4″ labels_font=”|||on|||||” labels_text_color=”#15022a” box_shadow_style=”preset3″ global_colors_info=”{}” theme_builder_area=”post_content”][/dipi_before_after_slider]

Powerful Features

Showcase your work results in a stunning way

Are you a make-up artist, or maybe a builder or hairdresser? Use the Before & After Slider to display your work in a beautiful and neat way. Add 2 versions of images, and showcase your work results with style.

N

Add custom labels

N

Use horizontal or vertical slider direction

N

Activate slider on hover or click

N

Add images alt text for SEO

N

Customize slider line and handle

N

Add image overlay

N

Advanced custom CSS fields