You can use Before & After slider with magnific popup(Ajax).
HTML markup:
|
1 2 3 4 |
<div class="ct-slider-afterANDbefore center-block"> <img src="../assets/images/tailor/demo-content/sample-before.jpg"> <img src="../assets/images/tailor/demo-content/sample-after.jpg"> </div> |
CSS class:
- .ct-slider-afterANDbefore
Javascripts:
|
1 2 3 |
$(window).load(function(){ $(".ct-slider-afterANDbefore").twentytwenty(); }); |
Options:
- default_offset_pct: 0.7, // How much of the before image is visible when the page loads
- orientation: ‘vertical’ // Orientation of the before and after images (‘horizontal’ or ‘vertical’)