{"id":2966,"date":"2021-03-23T12:59:37","date_gmt":"2021-03-23T12:59:37","guid":{"rendered":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/?page_id=2966"},"modified":"2021-06-22T11:39:40","modified_gmt":"2021-06-22T11:39:40","slug":"layout-12","status":"publish","type":"page","link":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/layout-12\/","title":{"rendered":"Layout 12"},"content":{"rendered":"<p>[vc_row][vc_column][vc_column_text]<\/p>\r\n<h4 class=\"has-text-align-center wp-block-heading\"><strong>An Example of Before After Slider<\/strong><\/h4>\r\n\r\n<p>\r\n<style>\r\n.sf-12-main-97{\r\n\twidth: 100%; \/* width *\/.\r\n\theight: auto;\r\n}\r\n\r\n.sf-12-main-97 img {\r\n\twidth : 100%;\r\n\t\theight : auto;\r\n\t}\r\n\r\n.sf-12-main-97 .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-97\">\r\n\t<div class=\"sf-12-container-97\" 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\/03\/m3.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\/03\/m2.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-97\").imagesLoaded().done( function() {\r\n\t\tjQuery(\".sf-12-container-97\").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 Edit', \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 Edit', \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: true, \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\n<\/p>\r\n\r\n<div class=\"wp-block-spacer\" style=\"height: 50px;\" aria-hidden=\"true\">\u00a0<\/div>\r\n\r\n<p>&nbsp;<\/p>\r\n\r\n<p class=\"has-text-align-left\"><strong>Settings Used :<\/strong> Width- 100%, Height &#8211; auto, Overlay Effect &#8211; ON, Before\/After Image Visible Ratio &#8211; 0.5, Orientation &#8211; Horizontal, Move Slider On Hover &#8211; OFF, Move With Handle Only &#8211; OFF, Click To Move &#8211; ON<\/p>\r\n\r\n<p>&nbsp;<\/p>\r\n\r\n<div class=\"wp-block-spacer\" style=\"height: 100px;\" aria-hidden=\"true\">\u00a0<\/div>\r\n\r\n<p>&nbsp;<\/p>\r\n\r\n<h4 class=\"has-text-align-center wp-block-heading\"><strong>A Basic Example Design Two <\/strong><\/h4>\r\n\r\n<p>\r\n<style>\r\n.sf-12-main-98{\r\n\twidth: 100%; \/* width *\/.\r\n\theight: auto;\r\n}\r\n\r\n.sf-12-main-98 img {\r\n\twidth : 100%;\r\n\t\theight : auto;\r\n\t}\r\n\r\n.sf-12-main-98 .twentytwenty-overlay:hover {\r\n\t\tbackground: rgba(0, 0, 0, 0);  \/* overlay off *\/.\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-98\">\r\n\t<div class=\"sf-12-container-98\" 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\/03\/Makeup-1-1.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\/03\/Makeup-1bnw.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-98\").imagesLoaded().done( function() {\r\n\t\tjQuery(\".sf-12-container-98\").twentytwenty({\r\n\t\t\tdefault_offset_pct: 0.35, \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: 'vertical', \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: 'B&amp;W', \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: 'Colored', \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: true, \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: true \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\n<\/p>\r\n\r\n<div class=\"wp-block-spacer\" style=\"height: 50px;\" aria-hidden=\"true\">\u00a0<\/div>\r\n\r\n<p>&nbsp;<\/p>\r\n\r\n<p class=\"has-text-align-left\"><strong>Settings Used :<\/strong> Width- 100%, Height &#8211; auto, Overlay Effect &#8211; OFF, Before\/After Image Visible Ratio &#8211; 0.35, Orientation &#8211; Vertical, Move Slider On Hover &#8211; ON, Move With Handle Only &#8211; OFF, Click To Move &#8211; ON<\/p>\r\n<p>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\r\n<h2 style=\"text-align: center;\"><strong>Video Tutorial<\/strong><\/h2>\r\n<p>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_video link=&#8221;https:\/\/www.youtube.com\/watch?v=CY0i3DIb1iM&amp;t=21s&#8221;][\/vc_column][\/vc_row]<\/p>","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column][vc_column_text] An Example of Before After Slider &nbsp; Settings Used : Width- 100%, Height &#8211; auto, Overlay Effect &#8211; ON, Before\/After Image Visible Ratio &#8211; 0.5, Orientation &#8211; Horizontal, Move Slider On Hover &#8211; OFF, Move With Handle Only &#8211; OFF, Click To Move &#8211; ON &nbsp; &nbsp; A Basic Example Design Two &nbsp; Settings [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":12,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2966","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/2966","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=2966"}],"version-history":[{"count":7,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/2966\/revisions"}],"predecessor-version":[{"id":3612,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/2966\/revisions\/3612"}],"wp:attachment":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/media?parent=2966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}