{"id":2414,"date":"2021-02-18T08:46:12","date_gmt":"2021-02-18T08:46:12","guid":{"rendered":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/?page_id=2414"},"modified":"2021-06-22T11:28:47","modified_gmt":"2021-06-22T11:28:47","slug":"layout-10","status":"publish","type":"page","link":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/layout-10\/","title":{"rendered":"Layout 10"},"content":{"rendered":"<p>[vc_row][vc_column][vc_custom_heading text=&#8221;Full Page Example with Title, Description and Buttons&#8221; font_container=&#8221;tag:h2|text_align:center&#8221; google_fonts=&#8221;font_family:Roboto%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C500%2C500italic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal&#8221;][\/vc_column][\/vc_row][vc_row full_width=&#8221;stretch_row_content_no_spaces&#8221;][vc_column][vc_column_text]\r\n<style>\r\n.sf-10-main-container-90:parent * {\r\n\tbox-sizing: border-box !important;\r\n}\r\n\r\n.sf-10-main-container-90 section {\r\n\tcolor: #ffffff; \t\t\t\t\t\/* title\/desc color *\/\t\t\t\r\n}\r\n\r\n.sf-10-main-container-90 {\r\n\tfont-family: sans-serif;\r\n\tbackground: #323232; \t\t\t\/* Background color *\/\r\n\tposition: relative;\r\n\theight: 100%;\t\t\t\t\t\/* slider height *\/\r\n\twidth: 100%;\t\t\t\t\t\t\/* slider width *\/\r\n\toverflow: hidden; \r\n}\r\n\r\n.sf-10-snap-container-90 {\r\n\theight: 100vh;\r\n\toverflow-y: scroll;\r\n\tscroll-snap-type: y mandatory;\r\n\t-ms-overflow-style: none;\r\n\tborder: 30px solid rgba(0, 0, 0, 0); \r\n}\r\n\r\n.sf-10-snap-container-90::-webkit-scrollbar {\r\n\tdisplay: none; \r\n}\r\n\r\n.sf-10-snap-container-90 section {\r\n\theight: 100%;\r\n\twidth: 100%;\r\n\tbackground-position: center center !important;\r\n\tbackground-size: cover !important;\r\n\tbackground-repeat: no-repeat !important;\r\n\tposition: relative;\r\n\tbackground: rgba(0, 0, 0, 0.5);\r\n\t-webkit-transition: opacity 2s ease;\r\n\t-moz-transition: opacity 2s ease;\r\n\t-ms-transition: opacity 2s ease;\r\n\t-o-transition: opacity 2s ease;\r\n\ttransition: opacity 2s ease;\r\n\tmargin: 50px 0;\r\n\tscroll-snap-align: start;\r\n\tpadding: 30px; \r\n}\r\n\r\n.sf-10-snap-container-90 section::before {\r\n\ttop: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\tright: 0;\r\n\tmargin: auto;\r\n\tcontent: '';\r\n\tposition: absolute;\r\n\tdisplay: inline-block;\r\n\theight: 100%;\r\n\twidth: 100%;\r\n\tbackground-position: center center;\r\n\tbackground-size: cover;\r\n\tbackground-repeat: no-repeat;\r\n\t-webkit-transition: opacity 2s ease;\r\n\t-moz-transition: opacity 2s ease;\r\n\t-ms-transition: opacity 2s ease;\r\n\t-o-transition: opacity 2s ease;\r\n\ttransition: opacity 2s ease;\r\n\topacity: 0.25;\r\n\tz-index: -1; \r\n}\r\n\r\n.sf-10-snap-container-90 section.active {\r\n\tbackground: rgba(0, 0, 0, 0); \r\n}\r\n\r\n.sf-10-snap-container-90 section.active::before {\r\n\topacity: 1 !important; \r\n}\r\n\r\n.sf-10-snap-container-90 section:first-child {\r\n\tmargin-top: 0 !important; \r\n}\r\n\r\n.sf-10-snap-container-90 section:last-of-type {\r\n\tmargin-bottom: 0 !important; \r\n}\r\n\r\n.sf-10-snap-container-90 section .content {\r\n\tmargin-top: 0vh; \r\n}\r\n\r\n.sf-10-snap-container-90 section .content .sf-10-title{\r\n\tfont-size: 32px;\r\n\tfont-weight: bold;\r\n\tdisplay: block;\r\n\tpadding: 10px;\r\n\tcolor: #ffffff;\t\t\t\t\/* title color *\/\r\n}\r\n\r\n.sf-10-snap-container-90 section .content .sf-10-desc{\r\n\tfont-size: 16px;\r\n\tdisplay: block;\r\n\tpadding: 10px;\r\n\tcolor: #ffffff;\t\t\t\t\/* description color *\/\r\n}\r\n\r\n.sf-10-snap-container-90 section .content .sf-10-bttns{\r\n\tbackground-color: #F1F1F1; \r\n\tcolor: black; border: none; \r\n\tcursor: pointer; \r\n\tborder-radius: 4px; \r\n\ttext-align: center; \r\n\tpadding: 5px 15px; \r\n\tmargin-left: 10px;\r\n\ttransition: all .3s;\r\n}\r\n\r\n.sf-10-snap-container-90 section .content .sf-10-bttns:hover {\r\n\tbackground-color: #3E3D3D; \r\n\tcolor: white; \r\n}\r\n\r\n.sf-10-snap-container-90 .nav-dots {\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\tright: 60px;\r\n\tdisplay: inline-block;\r\n\tjustify-content: center;\r\n\theight: fit-content;\r\n\tmargin: 0;\r\n\tlist-style-type: none; \r\n}\r\n\r\n.sf-10-snap-container-90 .nav-dots li {\r\n\tdisplay: block;\r\n\tmargin: 10px 0;\r\n\tbackground: #323232;;\t\t\t\t\t\/* Dots color *\/\r\n\tborder-radius: 100px;\r\n\twidth: 10px;\r\n\theight: 10px; \r\n}\r\n\r\n.sf-10-snap-container-90 .nav-dots li.active {\r\n\tbackground-color: #ffffff;; \t\t\t\t\t\/* Dots active color *\/\r\n}\r\n\r\n\r\n<\/style>\r\n\r\n\r\n<div class=\"sf-10-main-container-90\">\r\n\t<div class=\"sf-10-snap-container-90\">\r\n\t\t\t\t\t\t<section style=\"background-image: url('https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/03\/Makeup-2.jpg');\">\r\n\t\t\t\t\t<div class=\"content\">\r\n\t\t\t\t\t\t<span class=\"sf-10-title\">Full Makeup<\/span>\r\n\t\t\t\t\t\t<span class=\"sf-10-desc\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"sf-10-slide-button-link-1\" href=\"#\" target=\"_blank\"><button type=\"button\" class=\"sf-10-bttns\">More Info.<\/button><\/a>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"sf-10-slide-button-link-2\" href=\"#\" target=\"_blank\"><button type=\"button\" class=\"sf-10-bttns\">Book Now<\/button><\/a>\r\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/section>\r\n\t\t\t\t\t\t\t\t<section style=\"background-image: url('https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/03\/Makeup-1.jpg');\">\r\n\t\t\t\t\t<div class=\"content\">\r\n\t\t\t\t\t\t<span class=\"sf-10-title\">Skin Care<\/span>\r\n\t\t\t\t\t\t<span class=\"sf-10-desc\">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"sf-10-slide-button-link-1\" href=\"#\" target=\"_blank\"><button type=\"button\" class=\"sf-10-bttns\">More Info.<\/button><\/a>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"sf-10-slide-button-link-2\" href=\"#\" target=\"_blank\"><button type=\"button\" class=\"sf-10-bttns\">Book Now<\/button><\/a>\r\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/section>\r\n\t\t\t\t\t\t\t\t<section style=\"background-image: url('https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/03\/Makeup-5.jpg');\">\r\n\t\t\t\t\t<div class=\"content\">\r\n\t\t\t\t\t\t<span class=\"sf-10-title\">Hair Care<\/span>\r\n\t\t\t\t\t\t<span class=\"sf-10-desc\">Excepteur sint occaecat cupidatat non proiden.<\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"sf-10-slide-button-link-1\" href=\"#\" target=\"_blank\"><button type=\"button\" class=\"sf-10-bttns\">More Info.<\/button><\/a>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"sf-10-slide-button-link-2\" href=\"#\" target=\"_blank\"><button type=\"button\" class=\"sf-10-bttns\">Book Now<\/button><\/a>\r\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/section>\r\n\t\t\t\t\t\t\t\t<section style=\"background-image: url('https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/03\/Makeup-3.jpg');\">\r\n\t\t\t\t\t<div class=\"content\">\r\n\t\t\t\t\t\t<span class=\"sf-10-title\">Merchandise<\/span>\r\n\t\t\t\t\t\t<span class=\"sf-10-desc\">Ut enim ad minim veniam.<\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"sf-10-slide-button-link-1\" href=\"#\" target=\"_blank\"><button type=\"button\" class=\"sf-10-bttns\">More Info.<\/button><\/a>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"sf-10-slide-button-link-2\" href=\"#\" target=\"_blank\"><button type=\"button\" class=\"sf-10-bttns\">Book Now<\/button><\/a>\r\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/section>\r\n\t\t\t\t\t\t<ul class=\"nav-dots\">\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<li data-slide-link=\"0\"><\/li>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<li data-slide-link=\"1\"><\/li>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<li data-slide-link=\"2\"><\/li>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<li data-slide-link=\"3\"><\/li>\r\n\t\t\t\t\t\t\t\t\t\t<\/ul>\t\r\n\t<\/div>\r\n<\/div>\r\n\r\n\r\n<script>\r\nvar nunumR;\r\njQuery(document).ready((function() {\r\n\tjQuery(\".sec\").html(\"Active slide:\" + 1);\r\n\tjQuery(\".sf-10-snap-container-90 section:nth-child(1)\").addClass(\"active\");\r\n\tjQuery(\".sf-10-snap-container-90 li:nth-child(1)\").addClass(\"active\")\r\n}));\r\n\r\njQuery(\".sf-10-snap-container-90\").scroll((function() {\r\n\tjQuery(\".text\").html(\"ScrollTop: \" + jQuery(\".sf-10-snap-container-90\").scrollTop()); \r\n\tnunum = jQuery(\".sf-10-snap-container-90\").scrollTop() \/ jQuery(\".sf-10-snap-container-90\").height() + 1;\r\n\tnunumR = nunum.toString().split(\".\");\r\n\tjQuery(\".sf-10-snap-container-90 section\").removeClass(\"active\"); \r\n\tjQuery(\".sf-10-snap-container-90 section:nth-child(\" + nunumR[0] + \")\").addClass(\"active\"); \r\n\tjQuery(\".sec\").html(\"Active slide: \" + nunumR[0]);\r\n\tclearTimeout(jQuery.data(this, \"scrollTimer\"));\r\n\tjQuery.data(this, \"scrollTimer\", setTimeout((function() {\r\n\t\tjQuery(\".sf-10-snap-container-90 li\").removeClass(\"active\"), jQuery(\".sf-10-snap-container-90 li:nth-child(\" + nunumR[0] + \")\").addClass(\"active\")\r\n\t}), 150))\r\n})); \r\n\r\njQuery(window).resize((function() {\r\n\tclearTimeout(jQuery.data(this, \"resizelTimer\")); \r\n\tjQuery.data(this, \"resizelTimer\", setTimeout((function() {\r\n\t\tjQuery(\".sf-10-snap-container-90\").animate({\r\n\t\t\tscrollTop: 0\r\n\t\t}, 500)\r\n\t}), 150))\r\n})); \r\n\r\njQuery(\".count\").html(\"Slides: \" + jQuery(\".sf-10-snap-container-90\").length);\r\n\r\njQuery(\".sf-10-snap-container-90 li\").click((function() {\r\n\t\/\/console.log(jQuery(this).attr(\"data-slide-link\") * jQuery(\".sf-10-snap-container-90 section\").height()); \r\n\tjQuery(\".sf-10-snap-container-90\").animate({\r\n\t\tscrollTop: jQuery(this).attr(\"data-slide-link\") * jQuery(\".sf-10-snap-container-90 section\").height() + 120\r\n\t}, 1500)\r\n}));\r\n\r\n\r\n\/*jQuery(document).ready((function() {\r\n\tjQuery(\".sec\").html(\"Active slide: 1\"), jQuery(\".sf-10-snap-container-90 section:nth-child(1)\").addClass(\"active\"), jQuery(\".sf-10-snap-container-90 li:nth-child(1)\").addClass(\"active\")\r\n})), jQuery(\".sf-10-snap-container-90\").scroll((function() {\r\n\tjQuery(\".text\").html(\"ScrollTop: \" + jQuery(\".sf-10-snap-container-90\").scrollTop()), nunum = jQuery(\".sf-10-snap-container-90\").scrollTop() \/ jQuery(\".sf-10-snap-container-90\").height() + 1, nunumR = nunum.toString().split(\".\"), jQuery(\".sf-10-snap-container-90 section\").removeClass(\"active\"), jQuery(\".sf-10-snap-container-90 section:nth-child(\" + nunumR[0] + \")\").addClass(\"active\"), jQuery(\".sec\").html(\"Active slide: \" + nunumR[0]), clearTimeout(jQuery.data(this, \"scrollTimer\")), jQuery.data(this, \"scrollTimer\", setTimeout((function() {\r\n\t\tjQuery(\".sf-10-snap-container-90 li\").removeClass(\"active\"), jQuery(\".sf-10-snap-container-90 li:nth-child(\" + nunumR[0] + \")\").addClass(\"active\")\r\n\t}), 150))\r\n})), jQuery(window).resize((function() {\r\n\tclearTimeout(jQuery.data(this, \"resizelTimer\")), jQuery.data(this, \"resizelTimer\", setTimeout((function() {\r\n\t\tjQuery(\".sf-10-snap-container-90\").animate({\r\n\t\t\tscrollTop: 0\r\n\t\t}, 500)\r\n\t}), 150))\r\n})), jQuery(\".count\").html(\"Slides: \" + jQuery(\".sf-10-snap-container-90 section\").length), jQuery(\"li\").click((function() {\r\n\tconsole.log(jQuery(this).attr(\"data-slide-link\") * jQuery(\".sf-10-snap-container-90 section\").height()), jQuery(\".sf-10-snap-container-90\").animate({\r\n\t\tscrollTop: jQuery(this).attr(\"data-slide-link\") * jQuery(\".sf-10-snap-container-90 section\").height() + 120\r\n\t}, 1500)\r\n}));*\/\r\n<\/script>\r\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<strong>Settings Used:<\/strong> Width &#8211; 100%, Height &#8211; 100%, Slider Background Color &#8211; #323232, Title and Description Color &#8211; #ffffff, Slide Dots Color &#8211; #323232, Active Slide Dots Color &#8211; #ffffff[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;200px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_custom_heading text=&#8221;Full Page Example with Title, Description, Buttons and Custom CSS&#8221; font_container=&#8221;tag:h2|text_align:center&#8221; google_fonts=&#8221;font_family:Roboto%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C500%2C500italic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]\r\n<style>\r\n.sf-10-main-container-91:parent * {\r\n\tbox-sizing: border-box !important;\r\n}\r\n\r\n.sf-10-main-container-91 section {\r\n\tcolor: #e6e6e6; \t\t\t\t\t\/* title\/desc color *\/\t\t\t\r\n}\r\n\r\n.sf-10-main-container-91 {\r\n\tfont-family: sans-serif;\r\n\tbackground: #fdffe5; \t\t\t\/* Background color *\/\r\n\tposition: relative;\r\n\theight: 600px;\t\t\t\t\t\/* slider height *\/\r\n\twidth: 100%;\t\t\t\t\t\t\/* slider width *\/\r\n\toverflow: hidden; \r\n}\r\n\r\n.sf-10-snap-container-91 {\r\n\theight: 100vh;\r\n\toverflow-y: scroll;\r\n\tscroll-snap-type: y mandatory;\r\n\t-ms-overflow-style: none;\r\n\tborder: 30px solid rgba(0, 0, 0, 0); \r\n}\r\n\r\n.sf-10-snap-container-91::-webkit-scrollbar {\r\n\tdisplay: none; \r\n}\r\n\r\n.sf-10-snap-container-91 section {\r\n\theight: 100%;\r\n\twidth: 100%;\r\n\tbackground-position: center center !important;\r\n\tbackground-size: cover !important;\r\n\tbackground-repeat: no-repeat !important;\r\n\tposition: relative;\r\n\tbackground: rgba(0, 0, 0, 0.5);\r\n\t-webkit-transition: opacity 2s ease;\r\n\t-moz-transition: opacity 2s ease;\r\n\t-ms-transition: opacity 2s ease;\r\n\t-o-transition: opacity 2s ease;\r\n\ttransition: opacity 2s ease;\r\n\tmargin: 50px 0;\r\n\tscroll-snap-align: start;\r\n\tpadding: 30px; \r\n}\r\n\r\n.sf-10-snap-container-91 section::before {\r\n\ttop: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\tright: 0;\r\n\tmargin: auto;\r\n\tcontent: '';\r\n\tposition: absolute;\r\n\tdisplay: inline-block;\r\n\theight: 100%;\r\n\twidth: 100%;\r\n\tbackground-position: center center;\r\n\tbackground-size: cover;\r\n\tbackground-repeat: no-repeat;\r\n\t-webkit-transition: opacity 2s ease;\r\n\t-moz-transition: opacity 2s ease;\r\n\t-ms-transition: opacity 2s ease;\r\n\t-o-transition: opacity 2s ease;\r\n\ttransition: opacity 2s ease;\r\n\topacity: 0.25;\r\n\tz-index: -1; \r\n}\r\n\r\n.sf-10-snap-container-91 section.active {\r\n\tbackground: rgba(0, 0, 0, 0); \r\n}\r\n\r\n.sf-10-snap-container-91 section.active::before {\r\n\topacity: 1 !important; \r\n}\r\n\r\n.sf-10-snap-container-91 section:first-child {\r\n\tmargin-top: 0 !important; \r\n}\r\n\r\n.sf-10-snap-container-91 section:last-of-type {\r\n\tmargin-bottom: 0 !important; \r\n}\r\n\r\n.sf-10-snap-container-91 section .content {\r\n\tmargin-top: 0vh; \r\n}\r\n\r\n.sf-10-snap-container-91 section .content .sf-10-title{\r\n\tfont-size: 32px;\r\n\tfont-weight: bold;\r\n\tdisplay: block;\r\n\tpadding: 10px;\r\n\tcolor: #e6e6e6;\t\t\t\t\/* title color *\/\r\n}\r\n\r\n.sf-10-snap-container-91 section .content .sf-10-desc{\r\n\tfont-size: 16px;\r\n\tdisplay: block;\r\n\tpadding: 10px;\r\n\tcolor: #e6e6e6;\t\t\t\t\/* description color *\/\r\n}\r\n\r\n.sf-10-snap-container-91 section .content .sf-10-bttns{\r\n\tbackground-color: #F1F1F1; \r\n\tcolor: black; border: none; \r\n\tcursor: pointer; \r\n\tborder-radius: 4px; \r\n\ttext-align: center; \r\n\tpadding: 5px 15px; \r\n\tmargin-left: 10px;\r\n\ttransition: all .3s;\r\n}\r\n\r\n.sf-10-snap-container-91 section .content .sf-10-bttns:hover {\r\n\tbackground-color: #3E3D3D; \r\n\tcolor: white; \r\n}\r\n\r\n.sf-10-snap-container-91 .nav-dots {\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\tright: 60px;\r\n\tdisplay: inline-block;\r\n\tjustify-content: center;\r\n\theight: fit-content;\r\n\tmargin: 0;\r\n\tlist-style-type: none; \r\n}\r\n\r\n.sf-10-snap-container-91 .nav-dots li {\r\n\tdisplay: block;\r\n\tmargin: 10px 0;\r\n\tbackground: #fdffe5;;\t\t\t\t\t\/* Dots color *\/\r\n\tborder-radius: 100px;\r\n\twidth: 10px;\r\n\theight: 10px; \r\n}\r\n\r\n.sf-10-snap-container-91 .nav-dots li.active {\r\n\tbackground-color: #691b1b;; \t\t\t\t\t\/* Dots active color *\/\r\n}\r\n\r\n.sf-10-snap-container-91 {\r\n\theight: 600px;\r\n}\r\n\r\n.sf-10-snap-container-91 section .content .sf-10-bttns { border-radius: 50px; font-weight: bold; font-style: italic; box-shadow: text-shadow: 1px 1px black; margin-top: 10px; background-color: #fdffe5;} .sf-10-snap-container-91 section .content .sf-10-title { text-shadow: 1px 1px black; } .sf-10-snap-container-91 section .content .sf-10-desc { text-shadow: 1px 1px black; } .sf-10-snap-container-91 section .content { margin-top: 25%; text-align: center; } .sf-10-snap-container-91 { height: 600px;} .sf-10-snap-container-91 .nav-dots { top: 40%; }<\/style>\r\n\r\n\r\n<div class=\"sf-10-main-container-91\">\r\n\t<div class=\"sf-10-snap-container-91\">\r\n\t\t\t\t\t\t<section style=\"background-image: url('https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/03\/Fitness-5.jpg');\">\r\n\t\t\t\t\t<div class=\"content\">\r\n\t\t\t\t\t\t<span class=\"sf-10-title\">Anyone can start something, but only few can finish.<\/span>\r\n\t\t\t\t\t\t<span class=\"sf-10-desc\">The hard part isn\u2019t getting your body in shape. The hard part is getting your mind in shape.<\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"sf-10-slide-button-link-1\" href=\"#\" target=\"_blank\"><button type=\"button\" class=\"sf-10-bttns\">Button 1<\/button><\/a>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"sf-10-slide-button-link-2\" href=\"#\" target=\"_blank\"><button type=\"button\" class=\"sf-10-bttns\">Button 2<\/button><\/a>\r\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/section>\r\n\t\t\t\t\t\t\t\t<section style=\"background-image: url('https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/03\/Fitness-7.jpg');\">\r\n\t\t\t\t\t<div class=\"content\">\r\n\t\t\t\t\t\t<span class=\"sf-10-title\">You a lot stronger than you think.<\/span>\r\n\t\t\t\t\t\t<span class=\"sf-10-desc\">Never say the sky\u2019s the limit when there are footprints on the moon.<\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"sf-10-slide-button-link-1\" href=\"#\" target=\"_blank\"><button type=\"button\" class=\"sf-10-bttns\">Button 1<\/button><\/a>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"sf-10-slide-button-link-2\" href=\"#\" target=\"_blank\"><button type=\"button\" class=\"sf-10-bttns\">Button 2<\/button><\/a>\r\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/section>\r\n\t\t\t\t\t\t\t\t<section style=\"background-image: url('https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/03\/Fitness-8.jpg');\">\r\n\t\t\t\t\t<div class=\"content\">\r\n\t\t\t\t\t\t<span class=\"sf-10-title\">Don\u2019t wait for inspiration, be the inspiration.<\/span>\r\n\t\t\t\t\t\t<span class=\"sf-10-desc\">You must do what others don\u2019t, to achieve what others won\u2019t.<\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"sf-10-slide-button-link-1\" href=\"#\" target=\"_blank\"><button type=\"button\" class=\"sf-10-bttns\">Button 1<\/button><\/a>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"sf-10-slide-button-link-2\" href=\"#\" target=\"_blank\"><button type=\"button\" class=\"sf-10-bttns\">Button 2<\/button><\/a>\r\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/section>\r\n\t\t\t\t\t\t\t\t<section style=\"background-image: url('https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/03\/Fitness-4.jpg');\">\r\n\t\t\t\t\t<div class=\"content\">\r\n\t\t\t\t\t\t<span class=\"sf-10-title\">Keep calm and lift that shit.<\/span>\r\n\t\t\t\t\t\t<span class=\"sf-10-desc\">Fitness, In my opinion, is a mental exercise more than just physical.<\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"sf-10-slide-button-link-1\" href=\"#\" target=\"_blank\"><button type=\"button\" class=\"sf-10-bttns\">Button 1<\/button><\/a>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"sf-10-slide-button-link-2\" href=\"#\" target=\"_blank\"><button type=\"button\" class=\"sf-10-bttns\">Button 2<\/button><\/a>\r\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/section>\r\n\t\t\t\t\t\t\t\t<section style=\"background-image: url('https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/03\/Fitness-2.jpg');\">\r\n\t\t\t\t\t<div class=\"content\">\r\n\t\t\t\t\t\t<span class=\"sf-10-title\">Always remember: Good things take time.<\/span>\r\n\t\t\t\t\t\t<span class=\"sf-10-desc\">Your body can stand almost anything, It\u2019s your mind that you have to convince.<\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"sf-10-slide-button-link-1\" href=\"#\" target=\"_blank\"><button type=\"button\" class=\"sf-10-bttns\">Button 1<\/button><\/a>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"sf-10-slide-button-link-2\" href=\"#\" target=\"_blank\"><button type=\"button\" class=\"sf-10-bttns\">Button 2<\/button><\/a>\r\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/section>\r\n\t\t\t\t\t\t\t\t<section style=\"background-image: url('https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/03\/Fitness-1.jpg');\">\r\n\t\t\t\t\t<div class=\"content\">\r\n\t\t\t\t\t\t<span class=\"sf-10-title\">My fitness journey will be a lifelong journey.<\/span>\r\n\t\t\t\t\t\t<span class=\"sf-10-desc\">I am not telling you it is going to be easy, I am telling It\u2019s going to be worth it.<\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"sf-10-slide-button-link-1\" href=\"#\" target=\"_blank\"><button type=\"button\" class=\"sf-10-bttns\">Button 1<\/button><\/a>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"sf-10-slide-button-link-2\" href=\"#\" target=\"_blank\"><button type=\"button\" class=\"sf-10-bttns\">Button 2<\/button><\/a>\r\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/section>\r\n\t\t\t\t\t\t\t\t<section style=\"background-image: url('https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/03\/Fitness-3.jpg');\">\r\n\t\t\t\t\t<div class=\"content\">\r\n\t\t\t\t\t\t<span class=\"sf-10-title\">Comfort is the enemy of achievement.<\/span>\r\n\t\t\t\t\t\t<span class=\"sf-10-desc\">I workout because this small moment of discomfort makes me feel good afterward.<\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"sf-10-slide-button-link-1\" href=\"#\" target=\"_blank\"><button type=\"button\" class=\"sf-10-bttns\">Button 1<\/button><\/a>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"sf-10-slide-button-link-2\" href=\"#\" target=\"_blank\"><button type=\"button\" class=\"sf-10-bttns\">Button 2<\/button><\/a>\r\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/section>\r\n\t\t\t\t\t\t<ul class=\"nav-dots\">\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<li data-slide-link=\"0\"><\/li>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<li data-slide-link=\"1\"><\/li>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<li data-slide-link=\"2\"><\/li>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<li data-slide-link=\"3\"><\/li>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<li data-slide-link=\"4\"><\/li>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<li data-slide-link=\"5\"><\/li>\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<li data-slide-link=\"6\"><\/li>\r\n\t\t\t\t\t\t\t\t\t\t<\/ul>\t\r\n\t<\/div>\r\n<\/div>\r\n\r\n\r\n<script>\r\nvar nunumR;\r\njQuery(document).ready((function() {\r\n\tjQuery(\".sec\").html(\"Active slide:\" + 1);\r\n\tjQuery(\".sf-10-snap-container-91 section:nth-child(1)\").addClass(\"active\");\r\n\tjQuery(\".sf-10-snap-container-91 li:nth-child(1)\").addClass(\"active\")\r\n}));\r\n\r\njQuery(\".sf-10-snap-container-91\").scroll((function() {\r\n\tjQuery(\".text\").html(\"ScrollTop: \" + jQuery(\".sf-10-snap-container-91\").scrollTop()); \r\n\tnunum = jQuery(\".sf-10-snap-container-91\").scrollTop() \/ jQuery(\".sf-10-snap-container-91\").height() + 1;\r\n\tnunumR = nunum.toString().split(\".\");\r\n\tjQuery(\".sf-10-snap-container-91 section\").removeClass(\"active\"); \r\n\tjQuery(\".sf-10-snap-container-91 section:nth-child(\" + nunumR[0] + \")\").addClass(\"active\"); \r\n\tjQuery(\".sec\").html(\"Active slide: \" + nunumR[0]);\r\n\tclearTimeout(jQuery.data(this, \"scrollTimer\"));\r\n\tjQuery.data(this, \"scrollTimer\", setTimeout((function() {\r\n\t\tjQuery(\".sf-10-snap-container-91 li\").removeClass(\"active\"), jQuery(\".sf-10-snap-container-91 li:nth-child(\" + nunumR[0] + \")\").addClass(\"active\")\r\n\t}), 150))\r\n})); \r\n\r\njQuery(window).resize((function() {\r\n\tclearTimeout(jQuery.data(this, \"resizelTimer\")); \r\n\tjQuery.data(this, \"resizelTimer\", setTimeout((function() {\r\n\t\tjQuery(\".sf-10-snap-container-91\").animate({\r\n\t\t\tscrollTop: 0\r\n\t\t}, 500)\r\n\t}), 150))\r\n})); \r\n\r\njQuery(\".count\").html(\"Slides: \" + jQuery(\".sf-10-snap-container-91\").length);\r\n\r\njQuery(\".sf-10-snap-container-91 li\").click((function() {\r\n\t\/\/console.log(jQuery(this).attr(\"data-slide-link\") * jQuery(\".sf-10-snap-container-91 section\").height()); \r\n\tjQuery(\".sf-10-snap-container-91\").animate({\r\n\t\tscrollTop: jQuery(this).attr(\"data-slide-link\") * jQuery(\".sf-10-snap-container-91 section\").height() + 120\r\n\t}, 1500)\r\n}));\r\n\r\n\r\n\/*jQuery(document).ready((function() {\r\n\tjQuery(\".sec\").html(\"Active slide: 1\"), jQuery(\".sf-10-snap-container-91 section:nth-child(1)\").addClass(\"active\"), jQuery(\".sf-10-snap-container-91 li:nth-child(1)\").addClass(\"active\")\r\n})), jQuery(\".sf-10-snap-container-91\").scroll((function() {\r\n\tjQuery(\".text\").html(\"ScrollTop: \" + jQuery(\".sf-10-snap-container-91\").scrollTop()), nunum = jQuery(\".sf-10-snap-container-91\").scrollTop() \/ jQuery(\".sf-10-snap-container-91\").height() + 1, nunumR = nunum.toString().split(\".\"), jQuery(\".sf-10-snap-container-91 section\").removeClass(\"active\"), jQuery(\".sf-10-snap-container-91 section:nth-child(\" + nunumR[0] + \")\").addClass(\"active\"), jQuery(\".sec\").html(\"Active slide: \" + nunumR[0]), clearTimeout(jQuery.data(this, \"scrollTimer\")), jQuery.data(this, \"scrollTimer\", setTimeout((function() {\r\n\t\tjQuery(\".sf-10-snap-container-91 li\").removeClass(\"active\"), jQuery(\".sf-10-snap-container-91 li:nth-child(\" + nunumR[0] + \")\").addClass(\"active\")\r\n\t}), 150))\r\n})), jQuery(window).resize((function() {\r\n\tclearTimeout(jQuery.data(this, \"resizelTimer\")), jQuery.data(this, \"resizelTimer\", setTimeout((function() {\r\n\t\tjQuery(\".sf-10-snap-container-91\").animate({\r\n\t\t\tscrollTop: 0\r\n\t\t}, 500)\r\n\t}), 150))\r\n})), jQuery(\".count\").html(\"Slides: \" + jQuery(\".sf-10-snap-container-91 section\").length), jQuery(\"li\").click((function() {\r\n\tconsole.log(jQuery(this).attr(\"data-slide-link\") * jQuery(\".sf-10-snap-container-91 section\").height()), jQuery(\".sf-10-snap-container-91\").animate({\r\n\t\tscrollTop: jQuery(this).attr(\"data-slide-link\") * jQuery(\".sf-10-snap-container-91 section\").height() + 120\r\n\t}, 1500)\r\n}));*\/\r\n<\/script>\r\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<strong>Settings Used:<\/strong> Width &#8211; 100%, Height &#8211; 600px, Slider Background Color &#8211; #fdffe5, Title and Description Color &#8211; #e6e6e6, Slide Dots Color &#8211; #fdffe5, Active Slide Dots Color &#8211; #691b1b and Custom CSS used.[\/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>\n<h2 style=\"text-align: center;\"><strong>Youtube Tutorial<\/strong><\/h2>\n<p>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_video link=&#8221;https:\/\/www.youtube.com\/watch?v=_4icjiIuKTM&amp;t=33s&#8221;][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column][vc_custom_heading text=&#8221;Full Page Example with Title, Description and Buttons&#8221; font_container=&#8221;tag:h2|text_align:center&#8221; google_fonts=&#8221;font_family:Roboto%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C500%2C500italic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal&#8221;][\/vc_column][\/vc_row][vc_row full_width=&#8221;stretch_row_content_no_spaces&#8221;][vc_column][vc_column_text][\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]Settings Used: Width &#8211; 100%, Height &#8211; 100%, Slider Background Color &#8211; #323232, Title and Description Color &#8211; #ffffff, Slide Dots Color &#8211; #323232, Active Slide Dots Color &#8211; #ffffff[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;200px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_custom_heading text=&#8221;Full Page Example with Title, Description, Buttons and Custom CSS&#8221; font_container=&#8221;tag:h2|text_align:center&#8221; google_fonts=&#8221;font_family:Roboto%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C500%2C500italic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text][\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]Settings Used: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":14,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2414","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/2414","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=2414"}],"version-history":[{"count":12,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/2414\/revisions"}],"predecessor-version":[{"id":3607,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/2414\/revisions\/3607"}],"wp:attachment":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/media?parent=2414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}