{"id":1149,"date":"2021-04-08T07:28:11","date_gmt":"2021-04-08T07:28:11","guid":{"rendered":"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/?page_id=1149"},"modified":"2021-04-08T07:30:36","modified_gmt":"2021-04-08T07:30:36","slug":"layout-10","status":"publish","type":"page","link":"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/layout-10\/","title":{"rendered":"Layout 10"},"content":{"rendered":"<p>[vc_row][vc_column][vc_column_text]<\/p>\n<h4 class=\"has-text-align-center\" style=\"text-align: center;\"><strong>A Basic Example<\/strong><\/h4>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;30px&#8221;][vc_column_text]\n<div class=\"sf-10-main-container-42\">\n\t<div class=\"sf-10-snap-container-42\">\n\t\t\t\t\t\t<section style=\"background-image: url('https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/04\/pexels-photo-872831.jpeg');\">\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<span class=\"sf-10-title\"><\/span>\n\t\t\t\t\t\t<span class=\"sf-10-desc\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/section>\n\t\t\t\t\t\t\t\t<section style=\"background-image: url('https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/04\/sydney.jpg');\">\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<span class=\"sf-10-title\"><\/span>\n\t\t\t\t\t\t<span class=\"sf-10-desc\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/section>\n\t\t\t\t\t\t\t\t<section style=\"background-image: url('https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/03\/pexels-photo-753626.jpeg');\">\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<span class=\"sf-10-title\"><\/span>\n\t\t\t\t\t\t<span class=\"sf-10-desc\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/section>\n\t\t\t\t\t\t\t\t<section style=\"background-image: url('https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/03\/pexels-photo-208321.jpeg');\">\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<span class=\"sf-10-title\"><\/span>\n\t\t\t\t\t\t<span class=\"sf-10-desc\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t<div class=\"nav-dots-container\">\n\t\t<ul class=\"nav-dots\">\n\t\t\t\t\t\t\t\t<li data-slide-link=\"0\"><\/li>\n\t\t\t\t\t\t\t\t\t\t<li data-slide-link=\"1\"><\/li>\n\t\t\t\t\t\t\t\t\t\t<li data-slide-link=\"2\"><\/li>\n\t\t\t\t\t\t\t\t\t\t<li data-slide-link=\"3\"><\/li>\n\t\t\t\t\t\t\t<\/ul>\n\t<\/div>\n<\/div>\n\n<style>\n.sf-10-main-container-42 {\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tfont-family: sans-serif;\n\tbackground: #323232;\n\tposition: relative;\n\theight: 750px;\n\twidth: 100%;\n\toverflow: hidden; \n\tbox-sizing: border-box;\n}\n\n.sf-10-main-container-42 section {\n\tcolor: #ffffff;\n}\n\n.sf-10-snap-container-42 {\n\theight: 100%;\n\toverflow-y: scroll;\n\tscroll-snap-type: y mandatory;\n\t-ms-overflow-style: none;\n\tborder: 15px solid rgba(0, 0, 0, 0); \n\tbox-sizing: border-box;\n}\n\n.sf-10-snap-container-42::-webkit-scrollbar {\n\tdisplay: none; \n}\n\n.sf-10-snap-container-42 section {\n\theight: 100%;\n\twidth: 100%;\n\tbox-sizing: border-box;\n\tbackground-position: center center;\n\tbackground-size: cover;\n\tbackground-repeat: no-repeat;\n\tposition: relative;\n\tbackground-color: rgba(0, 0, 0, 0.5);\n\t-webkit-transition: opacity 2s ease;\n\t-moz-transition: opacity 2s ease;\n\t-ms-transition: opacity 2s ease;\n\t-o-transition: opacity 2s ease;\n\ttransition: opacity 2s ease;\n\tmargin: 0;\n\tscroll-snap-align: start;\n\tscroll-snap-stop: always;\n\tpadding: 30px; \n}\n\n.sf-10-snap-container-42 section::before {\n\ttop: 0;\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n\tmargin: auto;\n\tcontent: '';\n\tposition: absolute;\n\tdisplay: inline-block;\n\theight: 100%;\n\twidth: 100%;\n\tbackground-image: inherit;\n\tbackground-position: center center;\n\tbackground-size: cover;\n\tbackground-repeat: no-repeat;\n\t-webkit-transition: opacity 2s ease;\n\t-moz-transition: opacity 2s ease;\n\t-ms-transition: opacity 2s ease;\n\t-o-transition: opacity 2s ease;\n\ttransition: opacity 2s ease;\n\topacity: 0.25;\n\tz-index: -1; \n}\n\n.sf-10-snap-container-42 section.active {\n\tbackground-color: rgba(0, 0, 0, 0); \n}\n\n.sf-10-snap-container-42 section.active::before {\n\topacity: 1; \n}\n\n.sf-10-snap-container-42 section:first-child {\n\tmargin-top: 0; \n}\n\n.sf-10-snap-container-42 section:last-of-type {\n\tmargin-bottom: 0; \n}\n\n.sf-10-snap-container-42 section .content {\n\tmargin-top: 0vh; \n}\n\n.sf-10-snap-container-42 section .content .sf-10-title {\n\tfont-size: 24px;\n\tfont-weight: bold;\n\tdisplay: block;\n\tpadding: 10px;\n\tcolor: #ffffff;\n}\n\n.sf-10-snap-container-42 section .content .sf-10-desc {\n\tfont-size: 16px;\n\tdisplay: block;\n\tpadding: 10px;\n\tcolor: #ffffff;\n}\n\n.sf-10-main-container-42 section .content .sf-10-bttns {\n\tbackground-color: #F1F1F1; \n\tcolor: #000000; \n\tborder: 1px solid rgba(255, 255, 255, 0.15); \n\tcursor: pointer; \n\tborder-radius: 2px; \n\ttext-align: center; \n\tpadding: 8px 22px; \n\tmargin-left: 10px;\n\tfont-size: 13px;\n\tfont-weight: 600;\n\ttext-transform: uppercase;\n\tletter-spacing: 0.8px;\n\ttransition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);\n\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n.sf-10-main-container-42 section .content .sf-10-bttns:hover {\n\topacity: 0.9;\n\ttransform: translateY(-1px);\n\tbox-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);\n}\n\n.sf-10-main-container-42 .nav-dots-container {\n\tposition: absolute;\n\ttop: 50%;\n\tright: 40px;\n\ttransform: translateY(-50%);\n\theight: 160px;\n\twidth: 40px;\n\toverflow: hidden;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tz-index: 10;\n}\n\n.sf-10-main-container-42 .nav-dots {\n\tdisplay: flex;\n\tflex-direction: column;\n\tpadding: 0;\n\tmargin: 0;\n\tlist-style-type: none;\n\ttransition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);\n\talign-items: center;\n}\n\n.sf-10-main-container-42 .nav-dots li {\n\tdisplay: block;\n\tmargin: 6px auto;\n\tbackground: #323232;\n\tborder-radius: 50%;\n\twidth: 10px;\n\theight: 10px; \n\tmin-width: 10px;\n\tmin-height: 10px;\n\tflex-shrink: 0;\n\tbox-sizing: border-box;\n\tcursor: pointer;\n\ttransition: transform 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;\n\ttransform: scale(0.6);\n\topacity: 0.5;\n}\n\n.sf-10-main-container-42 .nav-dots li.active {\n\tbackground-color: #ffffff;\n\ttransform: scale(1.3);\n\topacity: 1;\n}\n\n.sf-10-main-container-42 .nav-dots li.adjacent-1 {\n\ttransform: scale(0.9);\n\topacity: 0.8;\n}\n\n.sf-10-main-container-42 .nav-dots li.adjacent-2 {\n\ttransform: scale(0.6);\n\topacity: 0.6;\n}\n\n<\/style>\n\n<script>\nvar isAnimating42 = false;\n\nfunction updateNavDots42(activeIndex) {\n\tvar $dots = jQuery(\".sf-10-main-container-42 li\");\n\t$dots.removeClass(\"active adjacent-1 adjacent-2\");\n\t\n\tvar $activeDot = $dots.eq(activeIndex);\n\t$activeDot.addClass(\"active\");\n\t\n\tif (activeIndex > 0) {\n\t\t$dots.eq(activeIndex - 1).addClass(\"adjacent-1\");\n\t}\n\tif (activeIndex > 1) {\n\t\t$dots.eq(activeIndex - 2).addClass(\"adjacent-2\");\n\t}\n\tif (activeIndex < $dots.length - 1) {\n\t\t$dots.eq(activeIndex + 1).addClass(\"adjacent-1\");\n\t}\n\tif (activeIndex < $dots.length - 2) {\n\t\t$dots.eq(activeIndex + 2).addClass(\"adjacent-2\");\n\t}\n\t\n\tvar dotHeight = 22;\n\tvar containerHeight = 160;\n\tvar translateY = (containerHeight \/ 2) - (activeIndex * dotHeight + (dotHeight \/ 2));\n\t\n\tjQuery(\".sf-10-main-container-42 .nav-dots\").css(\n\t\t\"transform\", \"translateY(\" + translateY + \"px)\"\n\t);\n}\n\njQuery(document).ready((function() {\n\tjQuery(\".sf-10-snap-container-42 section:nth-child(1)\").addClass(\"active\");\n\tupdateNavDots42(0);\n}));\n\njQuery(\".sf-10-snap-container-42\").scroll((function() {\n\tif (isAnimating42) return;\n\t\n\tvar $container = jQuery(this);\n\tvar containerHeight = $container.height();\n\tvar viewportCenter = containerHeight \/ 2;\n\t\n\tvar activeIndex = 0;\n\tvar minDistance = Infinity;\n\t\n\tvar $sections = $container.find(\"section\");\n\t$sections.each(function(index) {\n\t\tvar sectionCenterInViewport = jQuery(this).position().top + jQuery(this).outerHeight() \/ 2;\n\t\tvar distance = Math.abs(viewportCenter - sectionCenterInViewport);\n\t\tif (distance < minDistance) {\n\t\t\tminDistance = distance;\n\t\t\tactiveIndex = index;\n\t\t}\n\t});\n\t\n\t$sections.removeClass(\"active\");\n\t$sections.eq(activeIndex).addClass(\"active\");\n\t\n\tupdateNavDots42(activeIndex);\n})); \n\njQuery(\".sf-10-main-container-42 li\").click((function() {\n\tif (isAnimating42) return;\n\t\n\tvar index = jQuery(this).attr(\"data-slide-link\");\n\tvar $container = jQuery(\".sf-10-snap-container-42\");\n\tvar $section = $container.find(\"section\").eq(index);\n\tif ($section.length) {\n\t\tisAnimating42 = true;\n\t\t\n\t\tupdateNavDots42(parseInt(index));\n\t\t\n\t\tvar currentScrollTop = $container.scrollTop();\n\t\tvar sectionTop = $section.position().top;\n\t\tvar targetScrollTop = currentScrollTop + sectionTop;\n\t\t\n\t\t$container.css(\"scroll-snap-type\", \"none\");\n\t\t\n\t\t$container.animate({\n\t\t\tscrollTop: targetScrollTop\n\t\t}, 1000, function() {\n\t\t\t$container.css(\"scroll-snap-type\", \"y mandatory\");\n\t\t\tisAnimating42 = false;\n\t\t});\n\t}\n}));\n<\/script>\n[\/vc_column_text][vc_empty_space height=&#8221;200px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h4 class=\"has-text-align-center\" style=\"text-align: center;\"><strong>Slider with Slide Tiltle<\/strong><\/h4>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;30px&#8221;][vc_column_text]\n<div class=\"sf-10-main-container-43\">\n\t<div class=\"sf-10-snap-container-43\">\n\t\t\t\t\t\t<section style=\"background-image: url('https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/03\/Tasty-Breakfast-Meal.jpg');\">\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<span class=\"sf-10-title\">Tasty Breakfast Meal<\/span>\n\t\t\t\t\t\t<span class=\"sf-10-desc\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/section>\n\t\t\t\t\t\t\t\t<section style=\"background-image: url('https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/03\/Homemade-Pizzas.jpg');\">\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<span class=\"sf-10-title\">Homemade Pizzas<\/span>\n\t\t\t\t\t\t<span class=\"sf-10-desc\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/section>\n\t\t\t\t\t\t\t\t<section style=\"background-image: url('https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/03\/Delicious-Breakfast-Meal.jpg');\">\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<span class=\"sf-10-title\">Delicious Breakfast Meal<\/span>\n\t\t\t\t\t\t<span class=\"sf-10-desc\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/section>\n\t\t\t\t\t\t\t\t<section style=\"background-image: url('https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/03\/Mix-Vegetable-Meal.jpg');\">\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<span class=\"sf-10-title\">Mix Vegetable Meal<\/span>\n\t\t\t\t\t\t<span class=\"sf-10-desc\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t<div class=\"nav-dots-container\">\n\t\t<ul class=\"nav-dots\">\n\t\t\t\t\t\t\t\t<li data-slide-link=\"0\"><\/li>\n\t\t\t\t\t\t\t\t\t\t<li data-slide-link=\"1\"><\/li>\n\t\t\t\t\t\t\t\t\t\t<li data-slide-link=\"2\"><\/li>\n\t\t\t\t\t\t\t\t\t\t<li data-slide-link=\"3\"><\/li>\n\t\t\t\t\t\t\t<\/ul>\n\t<\/div>\n<\/div>\n\n<style>\n.sf-10-main-container-43 {\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tfont-family: sans-serif;\n\tbackground: #323232;\n\tposition: relative;\n\theight: 800px;\n\twidth: 100%;\n\toverflow: hidden; \n\tbox-sizing: border-box;\n}\n\n.sf-10-main-container-43 section {\n\tcolor: #ffffff;\n}\n\n.sf-10-snap-container-43 {\n\theight: 100%;\n\toverflow-y: scroll;\n\tscroll-snap-type: y mandatory;\n\t-ms-overflow-style: none;\n\tborder: 15px solid rgba(0, 0, 0, 0); \n\tbox-sizing: border-box;\n}\n\n.sf-10-snap-container-43::-webkit-scrollbar {\n\tdisplay: none; \n}\n\n.sf-10-snap-container-43 section {\n\theight: 100%;\n\twidth: 100%;\n\tbox-sizing: border-box;\n\tbackground-position: center center;\n\tbackground-size: cover;\n\tbackground-repeat: no-repeat;\n\tposition: relative;\n\tbackground-color: rgba(0, 0, 0, 0.5);\n\t-webkit-transition: opacity 2s ease;\n\t-moz-transition: opacity 2s ease;\n\t-ms-transition: opacity 2s ease;\n\t-o-transition: opacity 2s ease;\n\ttransition: opacity 2s ease;\n\tmargin: 0;\n\tscroll-snap-align: start;\n\tscroll-snap-stop: always;\n\tpadding: 30px; \n}\n\n.sf-10-snap-container-43 section::before {\n\ttop: 0;\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n\tmargin: auto;\n\tcontent: '';\n\tposition: absolute;\n\tdisplay: inline-block;\n\theight: 100%;\n\twidth: 100%;\n\tbackground-image: inherit;\n\tbackground-position: center center;\n\tbackground-size: cover;\n\tbackground-repeat: no-repeat;\n\t-webkit-transition: opacity 2s ease;\n\t-moz-transition: opacity 2s ease;\n\t-ms-transition: opacity 2s ease;\n\t-o-transition: opacity 2s ease;\n\ttransition: opacity 2s ease;\n\topacity: 0.25;\n\tz-index: -1; \n}\n\n.sf-10-snap-container-43 section.active {\n\tbackground-color: rgba(0, 0, 0, 0); \n}\n\n.sf-10-snap-container-43 section.active::before {\n\topacity: 1; \n}\n\n.sf-10-snap-container-43 section:first-child {\n\tmargin-top: 0; \n}\n\n.sf-10-snap-container-43 section:last-of-type {\n\tmargin-bottom: 0; \n}\n\n.sf-10-snap-container-43 section .content {\n\tmargin-top: 0vh; \n}\n\n.sf-10-snap-container-43 section .content .sf-10-title {\n\tfont-size: 24px;\n\tfont-weight: bold;\n\tdisplay: block;\n\tpadding: 10px;\n\tcolor: #ffffff;\n}\n\n.sf-10-snap-container-43 section .content .sf-10-desc {\n\tfont-size: 16px;\n\tdisplay: block;\n\tpadding: 10px;\n\tcolor: #ffffff;\n}\n\n.sf-10-main-container-43 section .content .sf-10-bttns {\n\tbackground-color: #F1F1F1; \n\tcolor: #000000; \n\tborder: 1px solid rgba(255, 255, 255, 0.15); \n\tcursor: pointer; \n\tborder-radius: 2px; \n\ttext-align: center; \n\tpadding: 8px 22px; \n\tmargin-left: 10px;\n\tfont-size: 13px;\n\tfont-weight: 600;\n\ttext-transform: uppercase;\n\tletter-spacing: 0.8px;\n\ttransition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);\n\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n.sf-10-main-container-43 section .content .sf-10-bttns:hover {\n\topacity: 0.9;\n\ttransform: translateY(-1px);\n\tbox-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);\n}\n\n.sf-10-main-container-43 .nav-dots-container {\n\tposition: absolute;\n\ttop: 50%;\n\tright: 40px;\n\ttransform: translateY(-50%);\n\theight: 160px;\n\twidth: 40px;\n\toverflow: hidden;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tz-index: 10;\n}\n\n.sf-10-main-container-43 .nav-dots {\n\tdisplay: flex;\n\tflex-direction: column;\n\tpadding: 0;\n\tmargin: 0;\n\tlist-style-type: none;\n\ttransition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);\n\talign-items: center;\n}\n\n.sf-10-main-container-43 .nav-dots li {\n\tdisplay: block;\n\tmargin: 6px auto;\n\tbackground: #323232;\n\tborder-radius: 50%;\n\twidth: 10px;\n\theight: 10px; \n\tmin-width: 10px;\n\tmin-height: 10px;\n\tflex-shrink: 0;\n\tbox-sizing: border-box;\n\tcursor: pointer;\n\ttransition: transform 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;\n\ttransform: scale(0.6);\n\topacity: 0.5;\n}\n\n.sf-10-main-container-43 .nav-dots li.active {\n\tbackground-color: #ffffff;\n\ttransform: scale(1.3);\n\topacity: 1;\n}\n\n.sf-10-main-container-43 .nav-dots li.adjacent-1 {\n\ttransform: scale(0.9);\n\topacity: 0.8;\n}\n\n.sf-10-main-container-43 .nav-dots li.adjacent-2 {\n\ttransform: scale(0.6);\n\topacity: 0.6;\n}\n\n<\/style>\n\n<script>\nvar isAnimating43 = false;\n\nfunction updateNavDots43(activeIndex) {\n\tvar $dots = jQuery(\".sf-10-main-container-43 li\");\n\t$dots.removeClass(\"active adjacent-1 adjacent-2\");\n\t\n\tvar $activeDot = $dots.eq(activeIndex);\n\t$activeDot.addClass(\"active\");\n\t\n\tif (activeIndex > 0) {\n\t\t$dots.eq(activeIndex - 1).addClass(\"adjacent-1\");\n\t}\n\tif (activeIndex > 1) {\n\t\t$dots.eq(activeIndex - 2).addClass(\"adjacent-2\");\n\t}\n\tif (activeIndex < $dots.length - 1) {\n\t\t$dots.eq(activeIndex + 1).addClass(\"adjacent-1\");\n\t}\n\tif (activeIndex < $dots.length - 2) {\n\t\t$dots.eq(activeIndex + 2).addClass(\"adjacent-2\");\n\t}\n\t\n\tvar dotHeight = 22;\n\tvar containerHeight = 160;\n\tvar translateY = (containerHeight \/ 2) - (activeIndex * dotHeight + (dotHeight \/ 2));\n\t\n\tjQuery(\".sf-10-main-container-43 .nav-dots\").css(\n\t\t\"transform\", \"translateY(\" + translateY + \"px)\"\n\t);\n}\n\njQuery(document).ready((function() {\n\tjQuery(\".sf-10-snap-container-43 section:nth-child(1)\").addClass(\"active\");\n\tupdateNavDots43(0);\n}));\n\njQuery(\".sf-10-snap-container-43\").scroll((function() {\n\tif (isAnimating43) return;\n\t\n\tvar $container = jQuery(this);\n\tvar containerHeight = $container.height();\n\tvar viewportCenter = containerHeight \/ 2;\n\t\n\tvar activeIndex = 0;\n\tvar minDistance = Infinity;\n\t\n\tvar $sections = $container.find(\"section\");\n\t$sections.each(function(index) {\n\t\tvar sectionCenterInViewport = jQuery(this).position().top + jQuery(this).outerHeight() \/ 2;\n\t\tvar distance = Math.abs(viewportCenter - sectionCenterInViewport);\n\t\tif (distance < minDistance) {\n\t\t\tminDistance = distance;\n\t\t\tactiveIndex = index;\n\t\t}\n\t});\n\t\n\t$sections.removeClass(\"active\");\n\t$sections.eq(activeIndex).addClass(\"active\");\n\t\n\tupdateNavDots43(activeIndex);\n})); \n\njQuery(\".sf-10-main-container-43 li\").click((function() {\n\tif (isAnimating43) return;\n\t\n\tvar index = jQuery(this).attr(\"data-slide-link\");\n\tvar $container = jQuery(\".sf-10-snap-container-43\");\n\tvar $section = $container.find(\"section\").eq(index);\n\tif ($section.length) {\n\t\tisAnimating43 = true;\n\t\t\n\t\tupdateNavDots43(parseInt(index));\n\t\t\n\t\tvar currentScrollTop = $container.scrollTop();\n\t\tvar sectionTop = $section.position().top;\n\t\tvar targetScrollTop = currentScrollTop + sectionTop;\n\t\t\n\t\t$container.css(\"scroll-snap-type\", \"none\");\n\t\t\n\t\t$container.animate({\n\t\t\tscrollTop: targetScrollTop\n\t\t}, 1000, function() {\n\t\t\t$container.css(\"scroll-snap-type\", \"y mandatory\");\n\t\t\tisAnimating43 = false;\n\t\t});\n\t}\n}));\n<\/script>\n[\/vc_column_text][vc_empty_space height=&#8221;200px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h4 class=\"has-text-align-center\" style=\"text-align: center;\"><strong>Slider With Slide Title And Description<\/strong><\/h4>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;30px&#8221;][vc_column_text]\n<div class=\"sf-10-main-container-44\">\n\t<div class=\"sf-10-snap-container-44\">\n\t\t\t\t\t\t<section style=\"background-image: url('https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/04\/pexels-photo-792381.jpeg');\">\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<span class=\"sf-10-title\">Tiger<\/span>\n\t\t\t\t\t\t<span class=\"sf-10-desc\">The tiger is the largest living cat species and a member of the genus Panthera. It is most recognisable for its dark vertical stripes on orange-brown fur with a lighter underside. It is an apex predator, primarily preying on ungulates such as deer and wild boar.<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/section>\n\t\t\t\t\t\t\t\t<section style=\"background-image: url('https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/04\/geese-water-birds-waterfowl-63330.jpeg');\">\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<span class=\"sf-10-title\">Geese Water Birds<\/span>\n\t\t\t\t\t\t<span class=\"sf-10-desc\">The Anatidae are the biological family of water birds that includes ducks, geese, and swans. The family has a cosmopolitan distribution, occurring on all the world&#039;s continents. These birds are adapted for swimming, floating on the water surface, and in some cases diving in at least shallow water.<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/section>\n\t\t\t\t\t\t\t\t<section style=\"background-image: url('https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/04\/bald-eagles-bald-eagle-bird-of-prey-adler-53581.jpeg');\">\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<span class=\"sf-10-title\">Bald Eagle<\/span>\n\t\t\t\t\t\t<span class=\"sf-10-desc\">The bald eagle is a bird of prey found in North America. A sea eagle, it has two known subspecies and forms a species pair with the white-tailed eagle. Its range includes most of Canada and Alaska, all of the contiguous United States, and northern Mexico<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/section>\n\t\t\t\t\t\t\t\t<section style=\"background-image: url('https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/04\/pexels-photo-3551498.jpeg');\">\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<span class=\"sf-10-title\">Elephant <\/span>\n\t\t\t\t\t\t<span class=\"sf-10-desc\">Elephants are the largest existing land animals. Three species are currently recognised: the African bush elephant, the African forest elephant, and the Asian elephant. Elephantidae is the only surviving family of the order Proboscidea; extinct members include the mastodons<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t<div class=\"nav-dots-container\">\n\t\t<ul class=\"nav-dots\">\n\t\t\t\t\t\t\t\t<li data-slide-link=\"0\"><\/li>\n\t\t\t\t\t\t\t\t\t\t<li data-slide-link=\"1\"><\/li>\n\t\t\t\t\t\t\t\t\t\t<li data-slide-link=\"2\"><\/li>\n\t\t\t\t\t\t\t\t\t\t<li data-slide-link=\"3\"><\/li>\n\t\t\t\t\t\t\t<\/ul>\n\t<\/div>\n<\/div>\n\n<style>\n.sf-10-main-container-44 {\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tfont-family: sans-serif;\n\tbackground: #323232;\n\tposition: relative;\n\theight: 750px;\n\twidth: 100%;\n\toverflow: hidden; \n\tbox-sizing: border-box;\n}\n\n.sf-10-main-container-44 section {\n\tcolor: #ffffff;\n}\n\n.sf-10-snap-container-44 {\n\theight: 100%;\n\toverflow-y: scroll;\n\tscroll-snap-type: y mandatory;\n\t-ms-overflow-style: none;\n\tborder: 15px solid rgba(0, 0, 0, 0); \n\tbox-sizing: border-box;\n}\n\n.sf-10-snap-container-44::-webkit-scrollbar {\n\tdisplay: none; \n}\n\n.sf-10-snap-container-44 section {\n\theight: 100%;\n\twidth: 100%;\n\tbox-sizing: border-box;\n\tbackground-position: center center;\n\tbackground-size: cover;\n\tbackground-repeat: no-repeat;\n\tposition: relative;\n\tbackground-color: rgba(0, 0, 0, 0.5);\n\t-webkit-transition: opacity 2s ease;\n\t-moz-transition: opacity 2s ease;\n\t-ms-transition: opacity 2s ease;\n\t-o-transition: opacity 2s ease;\n\ttransition: opacity 2s ease;\n\tmargin: 0;\n\tscroll-snap-align: start;\n\tscroll-snap-stop: always;\n\tpadding: 30px; \n}\n\n.sf-10-snap-container-44 section::before {\n\ttop: 0;\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n\tmargin: auto;\n\tcontent: '';\n\tposition: absolute;\n\tdisplay: inline-block;\n\theight: 100%;\n\twidth: 100%;\n\tbackground-image: inherit;\n\tbackground-position: center center;\n\tbackground-size: cover;\n\tbackground-repeat: no-repeat;\n\t-webkit-transition: opacity 2s ease;\n\t-moz-transition: opacity 2s ease;\n\t-ms-transition: opacity 2s ease;\n\t-o-transition: opacity 2s ease;\n\ttransition: opacity 2s ease;\n\topacity: 0.25;\n\tz-index: -1; \n}\n\n.sf-10-snap-container-44 section.active {\n\tbackground-color: rgba(0, 0, 0, 0); \n}\n\n.sf-10-snap-container-44 section.active::before {\n\topacity: 1; \n}\n\n.sf-10-snap-container-44 section:first-child {\n\tmargin-top: 0; \n}\n\n.sf-10-snap-container-44 section:last-of-type {\n\tmargin-bottom: 0; \n}\n\n.sf-10-snap-container-44 section .content {\n\tmargin-top: 0vh; \n}\n\n.sf-10-snap-container-44 section .content .sf-10-title {\n\tfont-size: 24px;\n\tfont-weight: bold;\n\tdisplay: block;\n\tpadding: 10px;\n\tcolor: #ffffff;\n}\n\n.sf-10-snap-container-44 section .content .sf-10-desc {\n\tfont-size: 16px;\n\tdisplay: block;\n\tpadding: 10px;\n\tcolor: #ffffff;\n}\n\n.sf-10-main-container-44 section .content .sf-10-bttns {\n\tbackground-color: #F1F1F1; \n\tcolor: #000000; \n\tborder: 1px solid rgba(255, 255, 255, 0.15); \n\tcursor: pointer; \n\tborder-radius: 2px; \n\ttext-align: center; \n\tpadding: 8px 22px; \n\tmargin-left: 10px;\n\tfont-size: 13px;\n\tfont-weight: 600;\n\ttext-transform: uppercase;\n\tletter-spacing: 0.8px;\n\ttransition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);\n\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n.sf-10-main-container-44 section .content .sf-10-bttns:hover {\n\topacity: 0.9;\n\ttransform: translateY(-1px);\n\tbox-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);\n}\n\n.sf-10-main-container-44 .nav-dots-container {\n\tposition: absolute;\n\ttop: 50%;\n\tright: 40px;\n\ttransform: translateY(-50%);\n\theight: 160px;\n\twidth: 40px;\n\toverflow: hidden;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tz-index: 10;\n}\n\n.sf-10-main-container-44 .nav-dots {\n\tdisplay: flex;\n\tflex-direction: column;\n\tpadding: 0;\n\tmargin: 0;\n\tlist-style-type: none;\n\ttransition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);\n\talign-items: center;\n}\n\n.sf-10-main-container-44 .nav-dots li {\n\tdisplay: block;\n\tmargin: 6px auto;\n\tbackground: #323232;\n\tborder-radius: 50%;\n\twidth: 10px;\n\theight: 10px; \n\tmin-width: 10px;\n\tmin-height: 10px;\n\tflex-shrink: 0;\n\tbox-sizing: border-box;\n\tcursor: pointer;\n\ttransition: transform 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;\n\ttransform: scale(0.6);\n\topacity: 0.5;\n}\n\n.sf-10-main-container-44 .nav-dots li.active {\n\tbackground-color: #ffffff;\n\ttransform: scale(1.3);\n\topacity: 1;\n}\n\n.sf-10-main-container-44 .nav-dots li.adjacent-1 {\n\ttransform: scale(0.9);\n\topacity: 0.8;\n}\n\n.sf-10-main-container-44 .nav-dots li.adjacent-2 {\n\ttransform: scale(0.6);\n\topacity: 0.6;\n}\n\n<\/style>\n\n<script>\nvar isAnimating44 = false;\n\nfunction updateNavDots44(activeIndex) {\n\tvar $dots = jQuery(\".sf-10-main-container-44 li\");\n\t$dots.removeClass(\"active adjacent-1 adjacent-2\");\n\t\n\tvar $activeDot = $dots.eq(activeIndex);\n\t$activeDot.addClass(\"active\");\n\t\n\tif (activeIndex > 0) {\n\t\t$dots.eq(activeIndex - 1).addClass(\"adjacent-1\");\n\t}\n\tif (activeIndex > 1) {\n\t\t$dots.eq(activeIndex - 2).addClass(\"adjacent-2\");\n\t}\n\tif (activeIndex < $dots.length - 1) {\n\t\t$dots.eq(activeIndex + 1).addClass(\"adjacent-1\");\n\t}\n\tif (activeIndex < $dots.length - 2) {\n\t\t$dots.eq(activeIndex + 2).addClass(\"adjacent-2\");\n\t}\n\t\n\tvar dotHeight = 22;\n\tvar containerHeight = 160;\n\tvar translateY = (containerHeight \/ 2) - (activeIndex * dotHeight + (dotHeight \/ 2));\n\t\n\tjQuery(\".sf-10-main-container-44 .nav-dots\").css(\n\t\t\"transform\", \"translateY(\" + translateY + \"px)\"\n\t);\n}\n\njQuery(document).ready((function() {\n\tjQuery(\".sf-10-snap-container-44 section:nth-child(1)\").addClass(\"active\");\n\tupdateNavDots44(0);\n}));\n\njQuery(\".sf-10-snap-container-44\").scroll((function() {\n\tif (isAnimating44) return;\n\t\n\tvar $container = jQuery(this);\n\tvar containerHeight = $container.height();\n\tvar viewportCenter = containerHeight \/ 2;\n\t\n\tvar activeIndex = 0;\n\tvar minDistance = Infinity;\n\t\n\tvar $sections = $container.find(\"section\");\n\t$sections.each(function(index) {\n\t\tvar sectionCenterInViewport = jQuery(this).position().top + jQuery(this).outerHeight() \/ 2;\n\t\tvar distance = Math.abs(viewportCenter - sectionCenterInViewport);\n\t\tif (distance < minDistance) {\n\t\t\tminDistance = distance;\n\t\t\tactiveIndex = index;\n\t\t}\n\t});\n\t\n\t$sections.removeClass(\"active\");\n\t$sections.eq(activeIndex).addClass(\"active\");\n\t\n\tupdateNavDots44(activeIndex);\n})); \n\njQuery(\".sf-10-main-container-44 li\").click((function() {\n\tif (isAnimating44) return;\n\t\n\tvar index = jQuery(this).attr(\"data-slide-link\");\n\tvar $container = jQuery(\".sf-10-snap-container-44\");\n\tvar $section = $container.find(\"section\").eq(index);\n\tif ($section.length) {\n\t\tisAnimating44 = true;\n\t\t\n\t\tupdateNavDots44(parseInt(index));\n\t\t\n\t\tvar currentScrollTop = $container.scrollTop();\n\t\tvar sectionTop = $section.position().top;\n\t\tvar targetScrollTop = currentScrollTop + sectionTop;\n\t\t\n\t\t$container.css(\"scroll-snap-type\", \"none\");\n\t\t\n\t\t$container.animate({\n\t\t\tscrollTop: targetScrollTop\n\t\t}, 1000, function() {\n\t\t\t$container.css(\"scroll-snap-type\", \"y mandatory\");\n\t\t\tisAnimating44 = false;\n\t\t});\n\t}\n}));\n<\/script>\n[\/vc_column_text][vc_empty_space height=&#8221;200px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<div class=\"wpb_text_column wpb_content_element wpb_animate_when_almost_visible wpb_bounceIn bounceIn wpb_start_animation animated\">\n<div class=\"wpb_wrapper\">\n<h2 style=\"text-align: center;\"><strong>Design Beautifull Responsive Image Slider<\/strong><\/h2>\n<\/div>\n<\/div>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_row_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_icon icon_fontawesome=&#8221;fas fa-download&#8221; color=&#8221;custom&#8221; size=&#8221;xl&#8221; align=&#8221;center&#8221; css_animation=&#8221;bounceIn&#8221; custom_color=&#8221;#84b85a&#8221;][vc_btn title=&#8221;Download Slider Factory&#8221; shape=&#8221;round&#8221; color=&#8221;green&#8221; size=&#8221;lg&#8221; align=&#8221;center&#8221; css_animation=&#8221;bounceIn&#8221; link=&#8221;url:https%3A%2F%2Fwordpress.org%2Fplugins%2Fslider-factory%2F|target:_blank&#8221;][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_icon icon_fontawesome=&#8221;fas fa-desktop&#8221; color=&#8221;custom&#8221; size=&#8221;xl&#8221; align=&#8221;center&#8221; css_animation=&#8221;bounceIn&#8221; custom_color=&#8221;#6fc3df&#8221;][vc_btn title=&#8221;Check Slider Factory Pro Demo&#8221; shape=&#8221;round&#8221; color=&#8221;info&#8221; size=&#8221;lg&#8221; align=&#8221;center&#8221; css_animation=&#8221;bounceIn&#8221; link=&#8221;url:https%3A%2F%2Fwpfrank.com%2Fwordpress-plugins%2Fslider-factory-pro%2F|target:_blank&#8221;][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_icon icon_fontawesome=&#8221;fas fa-shopping-cart&#8221; color=&#8221;custom&#8221; size=&#8221;xl&#8221; align=&#8221;center&#8221; css_animation=&#8221;bounceIn&#8221; custom_color=&#8221;#ff6255&#8243;][vc_btn title=&#8221;Buy Slider Factory Pro&#8221; shape=&#8221;round&#8221; color=&#8221;danger&#8221; size=&#8221;lg&#8221; align=&#8221;center&#8221; css_animation=&#8221;bounceIn&#8221; link=&#8221;url:https%3A%2F%2Fwpfrank.com%2Faccount%2Fsignup%2Fslider-factory-pro|target:_blank&#8221;][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column][vc_column_text] A Basic Example [\/vc_column_text][vc_empty_space height=&#8221;30px&#8221;][vc_column_text][\/vc_column_text][vc_empty_space height=&#8221;200px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text] Slider with Slide Tiltle [\/vc_column_text][vc_empty_space height=&#8221;30px&#8221;][vc_column_text][\/vc_column_text][vc_empty_space height=&#8221;200px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text] Slider With Slide Title And Description [\/vc_column_text][vc_empty_space height=&#8221;30px&#8221;][vc_column_text][\/vc_column_text][vc_empty_space height=&#8221;200px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text] Design Beautifull Responsive Image Slider [\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_row_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_icon icon_fontawesome=&#8221;fas fa-download&#8221; color=&#8221;custom&#8221; size=&#8221;xl&#8221; align=&#8221;center&#8221; css_animation=&#8221;bounceIn&#8221; custom_color=&#8221;#84b85a&#8221;][vc_btn title=&#8221;Download Slider Factory&#8221; shape=&#8221;round&#8221; color=&#8221;green&#8221; size=&#8221;lg&#8221; align=&#8221;center&#8221; css_animation=&#8221;bounceIn&#8221; link=&#8221;url:https%3A%2F%2Fwordpress.org%2Fplugins%2Fslider-factory%2F|target:_blank&#8221;][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_icon icon_fontawesome=&#8221;fas fa-desktop&#8221; color=&#8221;custom&#8221; size=&#8221;xl&#8221; align=&#8221;center&#8221; css_animation=&#8221;bounceIn&#8221; custom_color=&#8221;#6fc3df&#8221;][vc_btn [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1149","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-json\/wp\/v2\/pages\/1149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-json\/wp\/v2\/comments?post=1149"}],"version-history":[{"count":2,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-json\/wp\/v2\/pages\/1149\/revisions"}],"predecessor-version":[{"id":1155,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-json\/wp\/v2\/pages\/1149\/revisions\/1155"}],"wp:attachment":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-json\/wp\/v2\/media?parent=1149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}