{"id":564,"date":"2021-01-27T13:14:42","date_gmt":"2021-01-27T13:14:42","guid":{"rendered":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/?page_id=564"},"modified":"2021-06-30T07:54:33","modified_gmt":"2021-06-30T07:54:33","slug":"before-after-slider","status":"publish","type":"page","link":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/before-after-slider\/","title":{"rendered":"Before After Slider\u200b"},"content":{"rendered":"<p>[vc_row][vc_column][vc_column_text]<\/p>\r\n<h4 style=\"text-align: center;\"><span style=\"color: #999999;\"><strong>Slider By layout 12<\/strong><\/span><\/h4>\r\n<p>&nbsp;<\/p>\r\n\r\n<style>\r\n.sf-12-main-52{\r\n\twidth: 100%; \/* width *\/.\r\n\theight: auto;\r\n}\r\n\r\n.sf-12-main-52 img {\r\n\twidth : 100%;\r\n\t\theight : auto;\r\n\t}\r\n\r\n.sf-12-main-52 .twentytwenty-overlay:hover {\r\n\t\tbackground: rgba(0, 0, 0, 0.5);  \/* overlay on *\/.\r\n\t}\r\n\r\n.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n}\r\n\r\n<\/style>\r\n\r\n<div class=\"sf-12-main-52\">\r\n\t<div class=\"sf-12-container-52\" class=\"twentytwenty-container\">\r\n\t\t\t\t\t\t\t<!-- The before image is first in first loop -->.\r\n\t\t\t\t\t<img decoding=\"async\" alt=\"\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/06\/beautiful-woman-portrait.jpg\" \/>\r\n\t\t\t\t\t<!-- The after image is last in second loop -->.\r\n\t\t\t\t\t\t\t\t\t<!-- The before image is first in first loop -->.\r\n\t\t\t\t\t<img decoding=\"async\" alt=\"\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/06\/beautiful-woman-portrait_144627-27912.jpg\" \/>\r\n\t\t\t\t\t<!-- The after image is last in second loop -->.\r\n\t\t\t\t\t<\/div>\r\n<\/div>\r\n\r\n\r\n<script type=\"text\/javascript\">\r\n\r\njQuery(document).ready(function() {\t\r\n\tjQuery(\".sf-12-container-52\").imagesLoaded().done( function() {\r\n\t\tjQuery(\".sf-12-container-52\").twentytwenty({\r\n\t\t\tdefault_offset_pct: 0.5, \t\t\/\/ How much of the before image is visible when the page loads\t\t\t\t\t\t\t\t\tdefault_offset_pct: 0.5,\r\n\t\t\torientation: 'horizontal', \t\t\t\t\t\/\/ Orientation of the before and after images ('horizontal' or 'vertical') \t\t\t\t\t\torientation: 'horizontal',\r\n\t\t\tbefore_label: 'Before', \t\t\t\t\t\/\/ Set a custom before label    \/\/label on\/off  \t\t\t\t\t\t\t\t\t\t\t\tbefore_label: 'Before',\r\n\t\t\tafter_label: 'After', \t\t\t\t\t\/\/ Set a custom after label  \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tafter_label: 'After',\r\n\t\t\t\/\/no_overlay: true, \t\t\t\t\t\t\t\t\t\t\t\t\/\/Do not show the overlay with before and after  \t\t\t\t\t\t\t\t\t\t\t\tno_overlay: false,\r\n\t\t\tmove_slider_on_hover: false, \t\/\/ Move slider on mouse hover? \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tmove_slider_on_hover: false,\r\n\t\t\tmove_with_handle_only: false, \t\/\/ Allow a user to swipe anywhere on the image to control slider movement. \t\t\t\t\t\tmove_with_handle_only: true,\r\n\t\t\tclick_to_move: false \t\t\t\t\t\/\/ Allow a user to click (or tap) anywhere on the image to move the slider to that location.\tclick_to_move: false\r\n\t\t});\r\n\t});\r\n});\r\n<\/script>\r\n\r\n\r\n<p>&nbsp;<\/p>\r\n<!-- \/wp:post-content -->\r\n<p>&nbsp;<\/p>\r\n<p>[\/vc_column_text][\/vc_column][\/vc_row]<\/p>","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column][vc_column_text] Slider By layout 12 &nbsp; &nbsp; &nbsp; [\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":70,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-564","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/564","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/comments?post=564"}],"version-history":[{"count":10,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/564\/revisions"}],"predecessor-version":[{"id":3705,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/564\/revisions\/3705"}],"wp:attachment":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/media?parent=564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}