{"id":3390,"date":"2021-05-28T12:25:02","date_gmt":"2021-05-28T12:25:02","guid":{"rendered":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/?page_id=3390"},"modified":"2023-09-15T10:32:48","modified_gmt":"2023-09-15T10:32:48","slug":"layout-17","status":"publish","type":"page","link":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/layout-17\/","title":{"rendered":"Layout 17"},"content":{"rendered":"<p>[vc_row][vc_column css=&#8221;.vc_custom_1622722887875{margin-top: 50px !important;}&#8221;][vc_column_text]<\/p>\n<h3 class=\"has-text-align-center\" style=\"text-align: center;\"><strong>EXAMPLE<\/strong>\u00a0<strong>1- Full width<\/strong><\/h3>\n<p>[\/vc_column_text][vc_column_text]\r\n<div class=\"sf-17-main-container-119\">\r\n\t<div class=\"sf-17-viewport-119\">\r\n\t\t<a href=\"#\" id=\"sf-17-prev-119\" title=\"go to the next slide\"><\/a>\r\n\t\t<a href=\"#\" id=\"sf-17-next-119\" title=\"go to the next slide\"><\/a>\r\n\t\t<div id=\"box-119\" class=\"sf-17-slides-box-119\">\r\n\t\t\t\t\t\t\t\t<div class=\"sf-17-container-slide-119\">\r\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/06\/Nature-Temple.jpg\">\r\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-descdiv-119\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-title-119\">\r\n\t\t\t\t\t\t\t\tNature Temple\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-container-slide-119\">\r\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/06\/Nature-Greenary-Mountains.jpg\">\r\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-descdiv-119\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-title-119\">\r\n\t\t\t\t\t\t\t\tNature Greenary Mountains\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-container-slide-119\">\r\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/06\/Nature-Pleasant.jpg\">\r\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-descdiv-119\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-title-119\">\r\n\t\t\t\t\t\t\t\tNature Pleasant\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-container-slide-119\">\r\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/06\/Nature-Island.jpg\">\r\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-descdiv-119\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-title-119\">\r\n\t\t\t\t\t\t\t\tNature Island\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-container-slide-119\">\r\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/06\/Nature-Waves.jpg\">\r\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-descdiv-119\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-title-119\">\r\n\t\t\t\t\t\t\t\tNature Waves\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-container-slide-119\">\r\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/06\/Nature-Blue.jpg\">\r\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-descdiv-119\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-title-119\">\r\n\t\t\t\t\t\t\t\tNature Blue\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-container-slide-119\">\r\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/06\/Nature-Butterfly.jpg\">\r\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-descdiv-119\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-title-119\">\r\n\t\t\t\t\t\t\t\tNature Butterfly\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-container-slide-119\">\r\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/06\/Nature-SUNSET.jpg\">\r\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-descdiv-119\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-title-119\">\r\n\t\t\t\t\t\t\t\tNature SUNSET\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t<\/div> \r\n\t<div id=\"sf-17-time-indicator-119\"><\/div>\r\n\t<nav class=\"slider-controls-119\">\r\n\t\t<ul id=\"sf-17-controls-119\">\r\n\t\t\t\t\t\t\t<li><a class=\"sf-17-goto-slide-119 current\t\t\t\t\" href=\"#\" data-slideindex=\"0\"><\/a><\/li>\r\n\t\t\t\t\t\t\t\t\t<li><a class=\"sf-17-goto-slide-119 \t\t\t\t\" href=\"#\" data-slideindex=\"1\"><\/a><\/li>\r\n\t\t\t\t\t\t\t\t\t<li><a class=\"sf-17-goto-slide-119 \t\t\t\t\" href=\"#\" data-slideindex=\"2\"><\/a><\/li>\r\n\t\t\t\t\t\t\t\t\t<li><a class=\"sf-17-goto-slide-119 \t\t\t\t\" href=\"#\" data-slideindex=\"3\"><\/a><\/li>\r\n\t\t\t\t\t\t\t\t\t<li><a class=\"sf-17-goto-slide-119 \t\t\t\t\" href=\"#\" data-slideindex=\"4\"><\/a><\/li>\r\n\t\t\t\t\t\t\t\t\t<li><a class=\"sf-17-goto-slide-119 \t\t\t\t\" href=\"#\" data-slideindex=\"5\"><\/a><\/li>\r\n\t\t\t\t\t\t\t\t\t<li><a class=\"sf-17-goto-slide-119 \t\t\t\t\" href=\"#\" data-slideindex=\"6\"><\/a><\/li>\r\n\t\t\t\t\t\t\t\t\t<li><a class=\"sf-17-goto-slide-119 \t\t\t\t\" href=\"#\" data-slideindex=\"7\"><\/a><\/li>\r\n\t\t\t\t\t\t\t<\/ul>\r\n\t<\/nav>\r\n<\/div>\r\n<script>\r\n\r\n\tjQuery(document).ready(function () {\r\n\t\tvar $box = jQuery('#box-119'),\r\n\t\t$indicators = jQuery('.sf-17-goto-slide-119'),\r\n\t\t$timeIndicator = jQuery('#sf-17-time-indicator-119'),\r\n\t\tslideInterval = 5000; \/\/ Time interval between Slides. \r\n\r\n\t\tvar switchIndicator = function ($c, $n, currIndex, nextIndex) {\r\n\t\t\t$timeIndicator.stop().css('width', 0);\r\n\t\t\t$indicators.removeClass('current').eq(nextIndex).addClass('current');\r\n\t\t};\r\n\r\n\t\tvar startTimeIndicator = function () {\r\n\t\t\t$timeIndicator.animate({width: '100%'}, slideInterval);\r\n\t\t};\r\n\r\n\t\t\/\/ initialize the plugin with the desired settings.\r\n\t\t$box.boxSlider({\r\n\t\t\tspeed: 1500, \/\/speed of autoplay.\r\n\t\t\ttimeout: slideInterval,\r\n\t\t\tautoScroll: true,\r\n\t\t\tpauseOnHover:true,\r\n\t\t\tnext: '#sf-17-next-119', \r\n\t\t\tprev: '#sf-17-prev-119', \r\n\t\t\tpause: '#sf-17-pause',\r\n\t\t\teffect: 'scrollHorz3d',\r\n\t\t\tblindCount: 15, \/\/\r\n\t\t\tonbefore: switchIndicator,\r\n\t\t\tonafter: startTimeIndicator\r\n\t\t});\r\n\r\n\t\tstartTimeIndicator();\r\n\r\n\t\t\/\/ pagination isn't built in simply because it's easy to.\r\n\t\t\/\/ roll your own with the plugin API methods.\r\n\t\tjQuery('#sf-17-controls-119').on('click', '.sf-17-goto-slide-119', function (ev) {\r\n\t\t\t$box.boxSlider('showSlide', jQuery(this).data('slideindex'));\r\n\t\t\tev.preventDefault();\r\n\t\t});\r\n\t});\r\n<\/script>\r\n<style>\r\n.sf-17-main-container-119 {\r\n\twidth:100%;\r\n\theight:920px;\r\n\tmargin: 0 auto;\r\n}\r\n.sf-17-container-slide-119 {\r\n\twidth:100%;\r\n\theight:920px;\r\n}\r\n\r\n.sf-17-container-slide-119 img {\r\n\twidth:100%;\r\n\theight:920px;\r\n}\r\n\r\n.sf-17-slides-box-119 {\r\n\twidth:100%;\r\n\theight:920px;\r\n}\r\n\r\n.sf-17-viewport-119 {\r\n\twidth:100%;\r\n\theight:920px;\r\n}\r\n\r\n.sf-17-viewport-119 {\r\n  overflow: hidden;\r\n}\r\n.sf-17-main-container-119:hover #sf-17-next-119,\r\n.sf-17-main-container-119:hover #sf-17-prev-119{\r\n\tvisibility:visible;\r\n}\r\n#sf-17-controls-119 {\r\n  position: relative;\r\n  top: -50px;\r\n  right: 5%; \r\n  float: right;\r\n  overflow: hidden;\r\n  z-index:100;\r\n}\r\n\r\n#sf-17-controls-119 li {\r\n  display: inline;\r\n}\r\n\r\n.sf-17-goto-slide-119 {\r\n  margin-left: 20px;\r\n  width: 17px;\r\n  height: 17px;\r\n  display: block;\r\n  float: left;\r\n  border: solid 2px #000;\r\n  background-color: #555;\r\n  border-radius: 8px;\r\n  -webkit-box-shadow: inset 0px 0px 8px #333;\r\n  -moz-box-shadow: inset 0px 0px 8px #333;\r\n  box-shadow: inset 0px 0px 8px #333;\r\n}\r\n\r\n.sf-17-goto-slide-119.current {\r\n  background-color: #33cc33;\r\n}\r\n\r\n#sf-17-controls-119 a:hover {\r\n  border: solid 2px #33cc33;\r\n}\r\n\r\n#sf-17-next-119, #sf-17-prev-119 {\r\n   visibility:hidden;\r\n   position: absolute;\r\n  top: 50%;\r\n  width: 30px; \r\n  height: 350px;\r\n  background: url(https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/17\/css\/img\/next-prev-sprite.png) no-repeat;\r\n  display: block;\r\n  -webkit-transition: background .4s;\r\n  -moz-transition: background .4s;\r\n  transition: background .4s;\r\n  z-index: 100;\r\n   transform: translateY(-50%);\r\n}\r\n\r\n#sf-17-next-119:hover, #sf-17-prev-119:hover {\r\n  background: url(https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/17\/css\/img\/next-prev-sprite-hover-33cc33.png) no-repeat;\r\n  border: none;\r\n}\r\n\r\n#sf-17-prev-119 {\r\n  left: 2%;\r\n}\r\n\r\n#sf-17-next-119, #sf-17-next-119:hover {\r\n  right: 2%;\r\n  background-position: -30px 0 !important;\r\n} \r\n#sf-17-time-indicator-119 {\r\n  width: 0px;\r\n  height: 5px;\r\n  background-color: #33cc33;\r\n  position: relative;\r\n  bottom: 5px;\r\n  z-index:100;\r\n}\r\n.sf-17-descdiv-119 {\r\n  position: absolute;\r\n  \/\/ opacity:0;\r\n  bottom: 7%;\r\n  color: #fff;\r\n  padding:1%;\r\n  background: rgba(0,0,0,0.5);\r\n  width: 100%;\r\n  transition:all .4s;\r\n  box-sizing: border-box;\r\n}\r\n.sf-17-descdiv-119 .sf-17-desc-119 {\r\n\tmargin-top: 0.5%;\r\n\tmargin-bottom: 0.5%;\r\n}\t\t\r\n\r\n@media only screen and (min-width: 801px) and (max-width: 1000px) {\r\n\t.sf-17-main-container-119 {\r\n\t\theight:700px !important;\r\n\t}\r\n\t.sf-17-container-slide-119 {\r\n\t\theight:700px !important;\r\n\t}\r\n\t.sf-17-container-slide-119 img {\r\n\t\theight:700px !important;\r\n\t}\r\n\t.sf-17-slides-box-119 {\r\n\t\theight:700px !important;\r\n\t}\r\n\t.sf-17-viewport-119 {\r\n\t\theight:700px !important;\r\n\t}\r\n}\r\n@media only screen and (min-width: 768px) and (max-width: 800px) {\r\n\t.sf-17-main-container-119 {\r\n\t\theight:600px !important;\r\n\t}\r\n\t.sf-17-container-slide-119 {\r\n\t\theight:600px !important;\r\n\t}\r\n\t.sf-17-container-slide-119 img {\r\n\t\theight:600px !important;\r\n\t}\r\n\t.sf-17-slides-box-119 {\r\n\t\theight:600px !important;\r\n\t}\r\n\t.sf-17-viewport-119 {\r\n\t\theight:600px !important;\r\n\t}\r\n}\r\n@media only screen and (min-width: 200px) and (max-width: 767px) {\r\n\t.sf-17-main-container-119 {\r\n\t\theight:400px !important;\r\n\t}\r\n\t.sf-17-container-slide-119 {\r\n\t\theight:400px !important;\r\n\t}\r\n\t.sf-17-container-slide-119 img {\r\n\t\theight:400px !important;\r\n\t}\r\n\t.sf-17-slides-box-119 {\r\n\t\theight:400px !important;\r\n\t}\r\n\t.sf-17-viewport-119 {\r\n\t\theight:400px !important;\r\n\t}\r\n}\r\n@media only screen and (max-width: 540px) {\r\n\t.slider-controls-119 {\r\n\t\tdisplay: none;\r\n\t}\r\n}\r\n<\/style>\r\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;250px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column width=&#8221;1\/4&#8243;][\/vc_column][vc_column width=&#8221;1\/2&#8243;][vc_column_text css=&#8221;.vc_custom_1694773952115{margin-bottom: 20px !important;}&#8221;]<\/p>\n<h3 class=\"has-text-align-center\" style=\"text-align: center;\"><strong>EXAMPLE<\/strong>\u00a0<strong>2<\/strong><\/h3>\n<p>[\/vc_column_text][vc_column_text]\r\n<div class=\"sf-17-main-container-123\">\r\n\t<div class=\"sf-17-viewport-123\">\r\n\t\t<a href=\"#\" id=\"sf-17-prev-123\" title=\"go to the next slide\"><\/a>\r\n\t\t<a href=\"#\" id=\"sf-17-next-123\" title=\"go to the next slide\"><\/a>\r\n\t\t<div id=\"box-123\" class=\"sf-17-slides-box-123\">\r\n\t\t\t\t\t\t\t\t<div class=\"sf-17-container-slide-123\">\r\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/06\/animated-female-fighter.jpg\">\r\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-descdiv-123\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-title-123\">\r\n\t\t\t\t\t\t\t\tanimated female fighter\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-container-slide-123\">\r\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/06\/Animated-guy.jpg\">\r\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-descdiv-123\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-title-123\">\r\n\t\t\t\t\t\t\t\tAnimated guy\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-container-slide-123\">\r\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/06\/Animated-Galaxy.jpg\">\r\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-descdiv-123\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-title-123\">\r\n\t\t\t\t\t\t\t\tAnimated Galaxy\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-container-slide-123\">\r\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/06\/Animated-pokemon.jpg\">\r\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-descdiv-123\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-title-123\">\r\n\t\t\t\t\t\t\t\tAnimated pokemon\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-container-slide-123\">\r\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/06\/Animated-Fighter.jpg\">\r\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-descdiv-123\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-title-123\">\r\n\t\t\t\t\t\t\t\tAnimated Fighter\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-container-slide-123\">\r\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/06\/animated-Lion.jpg\">\r\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-descdiv-123\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-17-title-123\">\r\n\t\t\t\t\t\t\t\tanimated Lion\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t<\/div> \r\n\t<div id=\"sf-17-time-indicator-123\"><\/div>\r\n\t<nav class=\"slider-controls-123\">\r\n\t\t<ul id=\"sf-17-controls-123\">\r\n\t\t\t\t\t\t\t<li><a class=\"sf-17-goto-slide-123 current\t\t\t\t\" href=\"#\" data-slideindex=\"0\"><\/a><\/li>\r\n\t\t\t\t\t\t\t\t\t<li><a class=\"sf-17-goto-slide-123 \t\t\t\t\" href=\"#\" data-slideindex=\"1\"><\/a><\/li>\r\n\t\t\t\t\t\t\t\t\t<li><a class=\"sf-17-goto-slide-123 \t\t\t\t\" href=\"#\" data-slideindex=\"2\"><\/a><\/li>\r\n\t\t\t\t\t\t\t\t\t<li><a class=\"sf-17-goto-slide-123 \t\t\t\t\" href=\"#\" data-slideindex=\"3\"><\/a><\/li>\r\n\t\t\t\t\t\t\t\t\t<li><a class=\"sf-17-goto-slide-123 \t\t\t\t\" href=\"#\" data-slideindex=\"4\"><\/a><\/li>\r\n\t\t\t\t\t\t\t\t\t<li><a class=\"sf-17-goto-slide-123 \t\t\t\t\" href=\"#\" data-slideindex=\"5\"><\/a><\/li>\r\n\t\t\t\t\t\t\t<\/ul>\r\n\t<\/nav>\r\n<\/div>\r\n<script>\r\n\r\n\tjQuery(document).ready(function () {\r\n\t\tvar $box = jQuery('#box-123'),\r\n\t\t$indicators = jQuery('.sf-17-goto-slide-123'),\r\n\t\t$timeIndicator = jQuery('#sf-17-time-indicator-123'),\r\n\t\tslideInterval = 5000; \/\/ Time interval between Slides. \r\n\r\n\t\tvar switchIndicator = function ($c, $n, currIndex, nextIndex) {\r\n\t\t\t$timeIndicator.stop().css('width', 0);\r\n\t\t\t$indicators.removeClass('current').eq(nextIndex).addClass('current');\r\n\t\t};\r\n\r\n\t\tvar startTimeIndicator = function () {\r\n\t\t\t$timeIndicator.animate({width: '100%'}, slideInterval);\r\n\t\t};\r\n\r\n\t\t\/\/ initialize the plugin with the desired settings.\r\n\t\t$box.boxSlider({\r\n\t\t\tspeed: 1000, \/\/speed of autoplay.\r\n\t\t\ttimeout: slideInterval,\r\n\t\t\tautoScroll: true,\r\n\t\t\tpauseOnHover:false,\r\n\t\t\tnext: '#sf-17-next-123', \r\n\t\t\tprev: '#sf-17-prev-123', \r\n\t\t\tpause: '#sf-17-pause',\r\n\t\t\teffect: 'scrollVert3d',\r\n\t\t\tblindCount: 15, \/\/\r\n\t\t\tonbefore: switchIndicator,\r\n\t\t\tonafter: startTimeIndicator\r\n\t\t});\r\n\r\n\t\tstartTimeIndicator();\r\n\r\n\t\t\/\/ pagination isn't built in simply because it's easy to.\r\n\t\t\/\/ roll your own with the plugin API methods.\r\n\t\tjQuery('#sf-17-controls-123').on('click', '.sf-17-goto-slide-123', function (ev) {\r\n\t\t\t$box.boxSlider('showSlide', jQuery(this).data('slideindex'));\r\n\t\t\tev.preventDefault();\r\n\t\t});\r\n\t});\r\n<\/script>\r\n<style>\r\n.sf-17-main-container-123 {\r\n\twidth:800;\r\n\theight:600px;\r\n\tmargin: 0 auto;\r\n}\r\n.sf-17-container-slide-123 {\r\n\twidth:800;\r\n\theight:600px;\r\n}\r\n\r\n.sf-17-container-slide-123 img {\r\n\twidth:800;\r\n\theight:600px;\r\n}\r\n\r\n.sf-17-slides-box-123 {\r\n\twidth:800;\r\n\theight:600px;\r\n}\r\n\r\n.sf-17-viewport-123 {\r\n\twidth:800;\r\n\theight:600px;\r\n}\r\n\r\n.sf-17-viewport-123 {\r\n  overflow: hidden;\r\n}\r\n.sf-17-main-container-123:hover #sf-17-next-123,\r\n.sf-17-main-container-123:hover #sf-17-prev-123{\r\n\tvisibility:visible;\r\n}\r\n#sf-17-controls-123 {\r\n  position: relative;\r\n  top: -50px;\r\n  right: 5%; \r\n  float: right;\r\n  overflow: hidden;\r\n  z-index:100;\r\n}\r\n\r\n#sf-17-controls-123 li {\r\n  display: inline;\r\n}\r\n\r\n.sf-17-goto-slide-123 {\r\n  margin-left: 20px;\r\n  width: 17px;\r\n  height: 17px;\r\n  display: block;\r\n  float: left;\r\n  border: solid 2px #000;\r\n  background-color: #555;\r\n  border-radius: 8px;\r\n  -webkit-box-shadow: inset 0px 0px 8px #333;\r\n  -moz-box-shadow: inset 0px 0px 8px #333;\r\n  box-shadow: inset 0px 0px 8px #333;\r\n}\r\n\r\n.sf-17-goto-slide-123.current {\r\n  background-color: #28bf96;\r\n}\r\n\r\n#sf-17-controls-123 a:hover {\r\n  border: solid 2px #28bf96;\r\n}\r\n\r\n#sf-17-next-123, #sf-17-prev-123 {\r\n   visibility:hidden;\r\n   position: absolute;\r\n  top: 50%;\r\n  width: 30px; \r\n  height: 350px;\r\n  background: url(https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/17\/css\/img\/next-prev-sprite.png) no-repeat;\r\n  display: block;\r\n  -webkit-transition: background .4s;\r\n  -moz-transition: background .4s;\r\n  transition: background .4s;\r\n  z-index: 100;\r\n   transform: translateY(-50%);\r\n}\r\n\r\n#sf-17-next-123:hover, #sf-17-prev-123:hover {\r\n  background: url(https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/17\/css\/img\/next-prev-sprite-hover-28bf96.png) no-repeat;\r\n  border: none;\r\n}\r\n\r\n#sf-17-prev-123 {\r\n  left: 2%;\r\n}\r\n\r\n#sf-17-next-123, #sf-17-next-123:hover {\r\n  right: 2%;\r\n  background-position: -30px 0 !important;\r\n} \r\n#sf-17-time-indicator-123 {\r\n  width: 0px;\r\n  height: 5px;\r\n  background-color: #28bf96;\r\n  position: relative;\r\n  bottom: 5px;\r\n  z-index:100;\r\n}\r\n.sf-17-descdiv-123 {\r\n  position: absolute;\r\n  \/\/ opacity:0;\r\n  bottom: 7%;\r\n  color: #fff;\r\n  padding:1%;\r\n  background: rgba(0,0,0,0.5);\r\n  width: 100%;\r\n  transition:all .4s;\r\n  box-sizing: border-box;\r\n}\r\n.sf-17-descdiv-123 .sf-17-desc-123 {\r\n\tmargin-top: 0.5%;\r\n\tmargin-bottom: 0.5%;\r\n}\t\t\r\n\r\n@media only screen and (min-width: 801px) and (max-width: 1000px) {\r\n\t.sf-17-main-container-123 {\r\n\t\theight:700px !important;\r\n\t}\r\n\t.sf-17-container-slide-123 {\r\n\t\theight:700px !important;\r\n\t}\r\n\t.sf-17-container-slide-123 img {\r\n\t\theight:700px !important;\r\n\t}\r\n\t.sf-17-slides-box-123 {\r\n\t\theight:700px !important;\r\n\t}\r\n\t.sf-17-viewport-123 {\r\n\t\theight:700px !important;\r\n\t}\r\n}\r\n@media only screen and (min-width: 768px) and (max-width: 800px) {\r\n\t.sf-17-main-container-123 {\r\n\t\theight:600px !important;\r\n\t}\r\n\t.sf-17-container-slide-123 {\r\n\t\theight:600px !important;\r\n\t}\r\n\t.sf-17-container-slide-123 img {\r\n\t\theight:600px !important;\r\n\t}\r\n\t.sf-17-slides-box-123 {\r\n\t\theight:600px !important;\r\n\t}\r\n\t.sf-17-viewport-123 {\r\n\t\theight:600px !important;\r\n\t}\r\n}\r\n@media only screen and (min-width: 200px) and (max-width: 767px) {\r\n\t.sf-17-main-container-123 {\r\n\t\theight:400px !important;\r\n\t}\r\n\t.sf-17-container-slide-123 {\r\n\t\theight:400px !important;\r\n\t}\r\n\t.sf-17-container-slide-123 img {\r\n\t\theight:400px !important;\r\n\t}\r\n\t.sf-17-slides-box-123 {\r\n\t\theight:400px !important;\r\n\t}\r\n\t.sf-17-viewport-123 {\r\n\t\theight:400px !important;\r\n\t}\r\n}\r\n@media only screen and (max-width: 540px) {\r\n\t.slider-controls-123 {\r\n\t\tdisplay: none;\r\n\t}\r\n}\r\n<\/style>\r\n[\/vc_column_text][\/vc_column][vc_column width=&#8221;1\/4&#8243;][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space][\/vc_column][\/vc_row][vc_row][vc_column css=&#8221;.vc_custom_1622722887875{margin-top: 50px !important;}&#8221;][vc_column_text]<\/p>\n<h3 class=\"has-text-align-center\" style=\"text-align: center;\">Video Tutorial<\/h3>\n<p>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column width=&#8221;1\/4&#8243;][\/vc_column][vc_column width=&#8221;1\/2&#8243;][vc_video link=&#8221;https:\/\/youtube.com\/watch?v=WMl0j8bkclw&#8221;][\/vc_column][vc_column width=&#8221;1\/4&#8243;][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column css=&#8221;.vc_custom_1622722887875{margin-top: 50px !important;}&#8221;][vc_column_text] EXAMPLE\u00a01- Full width [\/vc_column_text][vc_column_text][\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;250px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column width=&#8221;1\/4&#8243;][\/vc_column][vc_column width=&#8221;1\/2&#8243;][vc_column_text css=&#8221;.vc_custom_1694773952115{margin-bottom: 20px !important;}&#8221;] EXAMPLE\u00a02 [\/vc_column_text][vc_column_text][\/vc_column_text][\/vc_column][vc_column width=&#8221;1\/4&#8243;][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space][\/vc_column][\/vc_row][vc_row][vc_column css=&#8221;.vc_custom_1622722887875{margin-top: 50px !important;}&#8221;][vc_column_text] Video Tutorial [\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column width=&#8221;1\/4&#8243;][\/vc_column][vc_column width=&#8221;1\/2&#8243;][vc_video link=&#8221;https:\/\/youtube.com\/watch?v=WMl0j8bkclw&#8221;][\/vc_column][vc_column width=&#8221;1\/4&#8243;][\/vc_column][\/vc_row]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":7,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-3390","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/3390","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=3390"}],"version-history":[{"count":29,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/3390\/revisions"}],"predecessor-version":[{"id":5155,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/3390\/revisions\/5155"}],"wp:attachment":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/media?parent=3390"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}