Before / After

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<div class="row align-items-center">
    <div class="col-sm-3">
        <div class="pr-3 pr-sm-5 pb-3 pb-sm-0 border-right-light">
            <h4 class="mb-2">Default</h4>
            <p class="m-0">This is the default before / after style.</p>
        </div>
    </div>
    <div class="col-sm-9">
        <div data-plugin-before-after>
            <!-- The before image is first -->
            <img src="/Portals/0/img/before.jpg" />
            <!-- The after image is last -->
            <img src="/Portals/0/img/after.jpg" />
        </div>
    </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<div class="row align-items-center mt-xlg">
    <div class="col-sm-3">
        <div class="pr-3 pr-sm-5 pb-3 pb-sm-0 border-right-light">
            <h4 class="mb-2">Move Slider on Hover</h4>
            <p class="m-0">Move slider on mouse hover option for before / after element.</p>
        </div>
    </div>
    <div class="col-sm-9">
        <div data-plugin-before-after data-plugin-options="{'move_slider_on_hover': true, 'move_with_handle_only': true, 'click_to_move': false}">
            <!-- The before image is first -->
            <img src="/Portals/0/img/furniturebefore.jpg" />
            <!-- The after image is last -->
            <img src="/Portals/0/img/furnitureafter.jpg" />
        </div>
    </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<div class="row align-items-center mt-xlg">
    <div class="col-sm-3">
        <div class="pr-3 pr-sm-5 pb-3 pb-sm-0 border-right-light">
            <h4 class="mb-2">Vertical Orientation</h4>
            <p class="m-0">Demonstrates sliding up and down.</p>
        </div>
    </div>
    <div class="col-sm-9">
        <div data-plugin-before-after data-plugin-options="{'default_offset_pct': 0.7, 'orientation': 'vertical', 'before_label': 'Before', 'after_label': 'After', 'no_overlay': true}">
            <!-- The before image is first -->
            <img src="/Portals/0/img/studybefore.jpg" />
            <!-- The after image is last -->
            <img src="/Portals/0/img/studyafter.jpg" />
        </div>
    </div>
</div>