{"id":2413,"date":"2021-02-18T08:46:09","date_gmt":"2021-02-18T08:46:09","guid":{"rendered":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/?page_id=2413"},"modified":"2021-06-22T11:20:42","modified_gmt":"2021-06-22T11:20:42","slug":"layout-9","status":"publish","type":"page","link":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/layout-9\/","title":{"rendered":"Layout 9"},"content":{"rendered":"<p>[vc_row][vc_column][vc_column_text]<\/p>\r\n<h4 class=\"has-text-align-center wp-block-heading\"><strong>A Basic Example<\/strong><\/h4>\r\n<p><br \/><div id=\"sf-9-82\">\r\n\t<div class=\"fullscreen-container-82 hidden-82\">\r\n\t <div class='fullscreen-div-82'>\r\n\t\t<img decoding=\"async\" class=\"remove-fullscreen-82\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/remove_icon.webp\" width=\"60\" \/>\r\n\t  <\/div>\r\n\t<\/div>\r\n\r\n\t<div id=\"sf-9-gallery-82\">\r\n\t  <div id=\"slide-82\">\r\n\t\t<div class=\"counter-82\"><\/div>\r\n\t\t<a class=\"prev-82\">&#x2039;<\/a>\r\n\t\t<a class=\"next-82\">&#x203A;<\/a>\r\n\t\t\t\t\t<img decoding=\"async\" class=\"toggleDiapo-82\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/pause_diapo.png\" width=\"40\" \/>\r\n\t\t\t\t\r\n\t\t<img decoding=\"async\" class=\"fullscreen-82\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/fullscreen.png\" width=\"40\" \/>\r\n\t\t<img id='preview-82' \/>\r\n\t  <\/div>\r\n\t  <div class=\"caption-container-82\">\r\n\t\t<span id=\"caption-82\"><\/span>\r\n\t  <\/div>\r\n\t  <div id=\"thumbnails\" style=\"text-align:center;\">\r\n\t\t<div class=\"wrapper-82\">\r\n\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-82\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/italy-mountains-dawn-daybreak-147411.jpeg\" alt=\"\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-82\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/kinzig-fischer-bach-black-forest-water-158316.jpeg\" alt=\"\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-82\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/pexels-photo-164022.jpeg\" alt=\"\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-82\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/pexels-photo-164250.jpeg\" alt=\"\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-82\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/pexels-photo-247600.jpeg\" alt=\"\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-82\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/pexels-photo-259620-scaled.jpeg\" alt=\"\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-82\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/pexels-photo-371589.jpeg\" alt=\"\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-82\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/pexels-photo-443446-scaled.jpeg\" alt=\"\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-82\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/pexels-photo-448714-scaled.jpeg\" alt=\"\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-82\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/pexels-photo-454880.jpeg\" alt=\"\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-82\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/pexels-photo-533769.jpeg\" alt=\"\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-82\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/pexels-photo-533881.jpeg\" alt=\"\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-82\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/pexels-photo-533973.jpeg\" alt=\"\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-82\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/pexels-photo-534164.jpeg\" alt=\"\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-82\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/pexels-photo-547119.jpeg\" alt=\"\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-82\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/pexels-photo-547494.jpeg\" alt=\"\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-82\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/pexels-photo-870711.jpeg\" alt=\"\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-82\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/pexels-photo-1062175.jpeg\" alt=\"\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-82\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/pexels-photo-1105389.jpeg\" alt=\"Sunshine\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-82\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/pexels-photo-1110656.jpeg\" alt=\"\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-82\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/pexels-photo-2166711.jpeg\" alt=\"\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-82\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/pexels-photo-2662116.jpeg\" alt=\"\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-82\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/pexels-photo-2916820.jpeg\" alt=\"\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-82\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/pexels-photo-3572740.jpeg\" alt=\"\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-82\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/pexels-photo-3739624.jpeg\" alt=\"\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-82\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/pexels-photo-4275893.jpeg\" alt=\"\">\r\n\t\t\t\t\t\t<\/div>\r\n\t  <\/div>\r\n\t  \r\n\t<\/div>\r\n<\/div>\r\n\r\n<style>\r\n#sf-9-82 {\r\n\twidth: 100% !important;\t\r\n}\r\n\r\n#img-82 {\r\n\t\r\n}\r\n\r\n.caption-container-82 {\r\n\tbackground-color: #ffffff;\r\n\ttext-align: center;\r\n\tpadding: 6px 8px;\r\n\tcolor : #ffffff;\r\n\twidth: 100% !important;\r\n}\r\n\r\n#thumbnails {\r\n\twhite-space: nowrap;\r\n\theight: 20%;\r\n\twidth: 100%;\r\n\r\n}\r\n\r\n.wrapper-82 {\r\n\tposition: relative;\r\n\toverflow: scroll;\r\n\tscroll-behavior: smooth;\r\n\twidth: 100% !important;\r\n}\r\n\r\n.wrapper-82::-webkit-scrollbar {\r\n\tdisplay: none;\r\n}\r\n\r\n\/* Hide scrollbar for IE and Edge *\/\r\n.wrapper-82 {\r\n\t-ms-overflow-style: none;\r\n}\r\n\r\n#slide-82 {\r\n\tposition: relative;\r\n\toverflow: hidden;\r\n}\r\n\r\n#preview-82 {\r\n\theight: 650px !important;\r\n\twidth: 100% !important;\r\n   object-fit: fill; \/*Object-fit properties are cover, contain, fit ,scale-down and none. *\/\r\n}\r\n\r\n.thumbnail-82 {\r\n\twidth: 170px;\r\n\theight: 100px;\r\n\topacity: 0.5;\r\n\t\tdisplay: none !important;\r\n\t}\r\n\r\n.selected-82 {\r\n\topacity: 1;\r\n}\r\n\r\n.thumbnail-82:hover {\r\n\topacity: 1;\r\n}\r\n\r\n#sf-9-gallery-82 {\r\n\twidth: 100%;\r\n\tmargin: auto;\r\n\tpadding: auto;\r\n}\r\n\r\n\/* .caption-container {\r\n\tbackground-color :#252525;\r\n\ttext-align: center;\r\n\tpadding: 6px 8px;\r\n\tcolor : red;\r\n} OLD CONTAINER CSS *\/\r\n\r\n.prev-82,\r\n.next-82 {\r\n\tcursor: pointer;\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\twidth: auto;\r\n\tpadding: 16px;\r\n\tmargin-top: -50px;\r\n\tcolor: white !important;\r\n\tfont-weight: bold;\r\n\tfont-size: 100px;\r\n\tborder-radius: 0 3px 3px 0;\r\n\tuser-select: none !important;\r\n\t-webkit-user-select: none !important;\r\n}\r\n\r\n.next-82 {\r\n\tright: 0;\r\n}\r\n\r\n.prev-82 {\r\n\tleft: 0;\r\n}\r\n\r\n.toggleDiapo-82 {\r\n\tposition: absolute;\r\n\tbottom: 0;\r\n\tleft: 50%;\r\n\tmargin-left: -30px;\r\n\tfont-size: 30px;\r\n\tcolor: goldenrod;\r\n\tfont-weight: bold;\r\n\tcursor: pointer;\r\n\tpadding: 5px;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\r\n}\r\n\r\n.fullscreen-82 {\r\n\tposition: absolute;\r\n\ttop: 10px;\r\n\tright: 10px;\r\n\tcursor: pointer;\r\n\tuser-select: none;\r\n}\r\n\r\n.prev-82:hover,\r\n.next-82:hover,\r\n.toggleDiapo-82:hover,\r\n.fullscreen-82:hover {\r\n\tbackground-color: rgba(0, 0, 0, 0.8);\r\n}\r\n\r\n.counter-82 {\r\n\tposition: absolute;\r\n\tborder-radius: 50%;\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\twidth: 50px;\r\n\theight: 50px;\r\n\ttop: 1.4%;\r\n\tleft: 0.9%;\r\n\tbackground-color: rgba(0, 0, 0, 0.8);\r\n\tborder: 2px solid rgb(212, 207, 207);\r\n\tcolor: white;\r\n\tfont: 1.5em Arial, sans-serif;\r\n}\r\n\r\n.fullscreen-container-82 {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\tbottom: 0;\r\n\tright: 0;\r\n\tz-index: 10 ;\r\n\tbackground-color: rgba(0, 0, 0, 0.9) ;\r\n\tdisplay: block ;\r\n}\r\n\r\n.fullscreen-div-82 {\r\n\twidth: 100% !important; \r\n\theight: 100% !important;\r\n\tdisplay: block ;\r\n\tmargin: auto;\r\n\tposition: relative;\r\n\ttop: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\tright: 0;\r\n\tbox-sizing: content-box;\r\n}\r\n\r\n.hidden-82 {\r\n\tdisplay: none;\r\n}\r\n\r\n.counter-82,\r\n.fullscreen-82,\r\n.prev-82,\r\n.next-82,\r\n.toggleDiapo-82 {\r\n\tz-index: 5;\r\n}\r\n\r\n.remove-fullscreen-82 {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tright: 0;\r\n\tcursor: pointer;\r\n}\r\n\r\n.remove-fullscreen-82:hover {\r\n\tbackground-color: rgba(0, 0, 0, 0.8);\r\n}\r\n\r\n<\/style>\r\n<script>\r\nwindow.myNameSpace = window.myNameSpace || {};\r\n\r\njQuery(function () {\r\n\r\n\t\/\/ load images\r\n\tjQuery.fn.addImage = function (filename, description) {\r\n\t\tvar img = document.createElement('img');\r\n\t\timg.src = \"images\/\" + filename;\r\n\t\timg.alt = description;\r\n\t\timg.className = \"thumbnail-82\";\r\n\t\tjQuery(this).append(img);\r\n\t}\r\n\r\n\t\/\/ check if element is hidden after scrollbar\r\n\tjQuery.fn.overflown = function () {\r\n\t\tvar limitLeft = jQuery('.wrapper-82').offset().left;\r\n\t\tvar limitRight = limitLeft + jQuery('.wrapper-82').width();\r\n\t\tvar elemOffsetLeft = jQuery(this[0]).offset().left;\r\n\t\tvar elemOffsetRight = elemOffsetLeft + jQuery(this[0]).width() \/ 2;\r\n\t\treturn (elemOffsetRight > limitRight || elemOffsetLeft < limitLeft) ? true : false;\r\n\t}\r\n\r\n\t\/\/ scroll to the end of element\r\n\tfunction scrollToElement(el, direction) {\r\n\t\telement_width = el.width();\r\n\t\tscroll_left = jQuery('.wrapper-82')[0].scrollLeft;\r\n\t\tif (direction == 'next')\r\n\t\t\tjQuery('.wrapper-82')[0].scrollTo(scroll_left + element_width, 0);\r\n\t\telse if (direction == 'prev')\r\n\t\t\tjQuery('.wrapper-82')[0].scrollTo(scroll_left - element_width, 0);\r\n\t}\r\n\r\n\tfunction showNextImg() {\r\n\t\tclearInterval(interv);\r\n\t\t\r\n\t\tinterv = setInterval(showNextImg, 4000);\r\n\t\t\r\n\t\tvar el = jQuery('.selected-82');\r\n\t\tvar counter = jQuery('.counter-82');\r\n\t\tif (el.next().length != 0) {\r\n\t\t\tcounter.text(el.index() + 1);\r\n\t\t\tif (el.next().overflown())\r\n\t\t\t\tscrollToElement(el, 'next');\r\n\t\t\t\/\/el.fadeOut(200, () => {\r\n\t\t\t\tel.next().trigger('click');\r\n\t\t\t\tel.show();\r\n\t\t\t\/\/});\r\n\t\t}\r\n\t\telse {\r\n\t\t\tjQuery('.thumbnail-82:first').trigger('click');\r\n\t\t\tjQuery('.wrapper-82')[0].scrollTo(0, 0);\r\n\t\t\tcounter.text('1');\r\n\t\t}\r\n\t\tjQuery('.toggleDiapo-82').attr('src', 'https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/pause_diapo.png');\r\n\t}\r\n\r\n\tfunction showPrevImg() {\r\n\t\tclearInterval(interv);\r\n\r\n\t\tinterv = setInterval(showNextImg, 4000);\r\n\r\n\t\tvar el = jQuery('.selected-82');\r\n\t\tvar counter = jQuery('.counter-82');\r\n\t\tif (el.prev().length != 0) {\r\n\t\t\tcounter.text(el.index() + 1);\r\n\t\t\tif (el.prev().overflown())\r\n\t\t\t\tscrollToElement(el, 'prev');\r\n\t\t\tel.prev().trigger('click');\r\n\t\t}\r\n\t\telse {\r\n\t\t\tjQuery('.thumbnail-82:last').trigger('click');\r\n\t\t\tjQuery('.wrapper-82')[0].scrollTo(jQuery('.wrapper-82')[0].scrollWidth, 0);\r\n\t\t\tcounter.text(jQuery('.thumbnail-82:last').index() + 1);\r\n\t\t}\r\n\t\tjQuery('.toggleDiapo-82').attr('src', 'https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/pause_diapo.png' );\r\n\t}\r\n\r\n\tfunction previewImg(e) {\r\n\t\tif (e.originalEvent !== undefined) {\r\n\t\t\tjQuery('.toggleDiapo-82').attr('src', 'https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/play_diapo.png');\r\n\t\t\tinterv = clearInterval(interv);\r\n\t\t}\r\n\t\tvar wrapper = jQuery('.wrapper-82');\r\n\t\tvar index = jQuery(this).index();\r\n\t\tjQuery('.selected-82').toggleClass('selected-82');\r\n\t\tjQuery(this).toggleClass('selected-82')\r\n\t\tjQuery(\"#caption-82\").text(jQuery('.selected-82').attr('alt'));\r\n\t\tjQuery('.counter-82').text(index + 1);\r\n\t\tvar src = jQuery(this).attr('src');\r\n\t\tjQuery('#preview-82').fadeOut(1000, () => {\r\n\t\t\tjQuery('#preview-82').attr('src', src);\r\n\t\t\tjQuery('#preview-82').fadeIn(1000);\r\n\t\t});\r\n\t}\r\n\r\n\tfunction toggleDiapo() {\r\n\t\tinterv = (interv != null) ? clearInterval(interv) : setInterval(showNextImg, 4000);\r\n\t\tvar src = jQuery('.toggleDiapo-82').attr('src');\r\n\t\tif (src == \"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/play_diapo.png\")\r\n\t\t\tjQuery('.toggleDiapo-82').attr('src', 'https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/pause_diapo.png' );\r\n\t\telse\r\n\t\t\tjQuery('.toggleDiapo-82').attr('src', 'https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/play_diapo.png');\r\n\t}\r\n\r\n\tfunction goFullscreen() {\r\n\t\tjQuery('.toggleDiapo-82').attr('src', 'https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/remove_icon.webp' );\r\n\t\tinterv = clearInterval(interv);\r\n\r\n\t\tvar selected = jQuery('.selected-82').attr('src');\r\n\t\tvar container = jQuery('.fullscreen-container-82');\r\n\t\tjQuery('.fullscreen-div-82').css({\r\n\t\t\t'background-image': 'url(' + selected + ')',\r\n\t\t\t'background-size': 'contain',\r\n\t\t\t'background-repeat': 'no-repeat',\r\n\t\t\t'background-position': 'center'\r\n\t\t});\r\n\t\tcontainer.fadeIn('slow');\r\n\t\tcontainer.on('click', function () {\r\n\t\t\tjQuery(this).fadeOut('slow');\r\n\t\t});\r\n\t}\r\n\r\n\t\/\/ show first image.\r\n\tvar first = jQuery('.thumbnail-82:first').toggleClass('selected-82');\r\n\tjQuery('.counter-82').text('1');\r\n\tjQuery('#preview-82').attr('src', first.attr('src'));\r\n\tjQuery(\"#caption-82\").text(first.attr('alt'));\r\n\t\/\/ start auto diapo.\r\n\tvar interv;\r\n\t\tinterv = setInterval(showNextImg, 4000);\r\n\t\t\r\n\t\/\/ setup event listeners.\r\n\tjQuery('.next-82').on('click', showNextImg);\r\n\tjQuery('.prev-82').on('click', showPrevImg);\r\n\tjQuery('.thumbnail-82').on('click', previewImg);\r\n\tjQuery('.toggleDiapo-82').on('click', toggleDiapo);\r\n\tjQuery('.fullscreen-82').on('click', goFullscreen);\r\n\r\n});\r\n<\/script>\r\n\n<p>\n<br \/><\/p>\r\n<div class=\"wp-block-spacer\" style=\"height: 25px;\" aria-hidden=\"true\">\u00a0<\/div>\r\n<p>\r\n\r\n<strong>Settings Used :<\/strong> Width &#8211; 100%, Height &#8211; 720px, Auto Play on Load &#8211; ON, Auto Play Speed &#8211; 3000ms, Fade Speed &#8211; 350ms<\/p>\r\n<p>\r\n\r\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;150px&#8221;][vc_column_text]<\/p>\r\n<h4 class=\"has-text-align-center\"><strong>Slide Show WIth Slide Title<\/strong><\/h4>\r\n<p><br \/><div id=\"sf-9-81\">\r\n\t<div class=\"fullscreen-container-81 hidden-81\">\r\n\t <div class='fullscreen-div-81'>\r\n\t\t<img decoding=\"async\" class=\"remove-fullscreen-81\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/remove_icon.webp\" width=\"60\" \/>\r\n\t  <\/div>\r\n\t<\/div>\r\n\r\n\t<div id=\"sf-9-gallery-81\">\r\n\t  <div id=\"slide-81\">\r\n\t\t<div class=\"counter-81\"><\/div>\r\n\t\t<a class=\"prev-81\">&#x2039;<\/a>\r\n\t\t<a class=\"next-81\">&#x203A;<\/a>\r\n\t\t\t\t\t<img decoding=\"async\" class=\"toggleDiapo-81\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/pause_diapo.png\" width=\"40\" \/>\r\n\t\t\t\t\r\n\t\t<img decoding=\"async\" class=\"fullscreen-81\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/fullscreen.png\" width=\"40\" \/>\r\n\t\t<img id='preview-81' \/>\r\n\t  <\/div>\r\n\t  <div class=\"caption-container-81\">\r\n\t\t<span id=\"caption-81\"><\/span>\r\n\t  <\/div>\r\n\t  <div id=\"thumbnails\" style=\"text-align:center;\">\r\n\t\t<div class=\"wrapper-81\">\r\n\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-81\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/01\/pagani-huayra.jpg\" alt=\"pagani huayra\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-81\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/01\/Porsche-918-Spyder.jpg\" alt=\"Porsche 918 Spyder\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-81\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/01\/Mercedes-Benz.jpg\" alt=\"Mercedes-Benz\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-81\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/01\/Porsche-Carrera-GT_1.jpg\" alt=\"Porsche Carrera GT_1\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-81\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/01\/Ferrari-Enzo.jpg\" alt=\"Ferrari Enzo\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-81\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/01\/Bugatti-Veyron-Super-Sport.jpg\" alt=\"Bugatti Veyron Super Sport\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-81\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/01\/Koenigsegg-CCX.jpg\" alt=\"Koenigsegg CCX\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-81\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/01\/Maserati-MC12.jpg\" alt=\"Maserati MC12\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-81\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/01\/Lamborghini-Reventon-2.jpg\" alt=\"Lamborghini Revent\u00f3n\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-81\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/01\/Bugatti-Chiron.jpg\" alt=\"Bugatti Chiron\">\r\n\t\t\t\t\t\t<\/div>\r\n\t  <\/div>\r\n\t  \r\n\t<\/div>\r\n<\/div>\r\n\r\n<style>\r\n#sf-9-81 {\r\n\twidth: 100% !important;\t\r\n}\r\n\r\n#img-81 {\r\n\t\r\n}\r\n\r\n.caption-container-81 {\r\n\tbackground-color: #252525;\r\n\ttext-align: center;\r\n\tpadding: 6px 8px;\r\n\tcolor : #ffffff;\r\n\twidth: 100% !important;\r\n}\r\n\r\n#thumbnails {\r\n\twhite-space: nowrap;\r\n\theight: 20%;\r\n\twidth: 100%;\r\n\r\n}\r\n\r\n.wrapper-81 {\r\n\tposition: relative;\r\n\toverflow: scroll;\r\n\tscroll-behavior: smooth;\r\n\twidth: 100% !important;\r\n}\r\n\r\n.wrapper-81::-webkit-scrollbar {\r\n\tdisplay: none;\r\n}\r\n\r\n\/* Hide scrollbar for IE and Edge *\/\r\n.wrapper-81 {\r\n\t-ms-overflow-style: none;\r\n}\r\n\r\n#slide-81 {\r\n\tposition: relative;\r\n\toverflow: hidden;\r\n}\r\n\r\n#preview-81 {\r\n\theight: 720px !important;\r\n\twidth: 100% !important;\r\n   object-fit: fill; \/*Object-fit properties are cover, contain, fit ,scale-down and none. *\/\r\n}\r\n\r\n.thumbnail-81 {\r\n\twidth: 170px;\r\n\theight: 100px;\r\n\topacity: 0.5;\r\n\t\tdisplay: unset !important;\r\n\t}\r\n\r\n.selected-81 {\r\n\topacity: 1;\r\n}\r\n\r\n.thumbnail-81:hover {\r\n\topacity: 1;\r\n}\r\n\r\n#sf-9-gallery-81 {\r\n\twidth: 100%;\r\n\tmargin: auto;\r\n\tpadding: auto;\r\n}\r\n\r\n\/* .caption-container {\r\n\tbackground-color :#252525;\r\n\ttext-align: center;\r\n\tpadding: 6px 8px;\r\n\tcolor : red;\r\n} OLD CONTAINER CSS *\/\r\n\r\n.prev-81,\r\n.next-81 {\r\n\tcursor: pointer;\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\twidth: auto;\r\n\tpadding: 16px;\r\n\tmargin-top: -50px;\r\n\tcolor: white !important;\r\n\tfont-weight: bold;\r\n\tfont-size: 100px;\r\n\tborder-radius: 0 3px 3px 0;\r\n\tuser-select: none !important;\r\n\t-webkit-user-select: none !important;\r\n}\r\n\r\n.next-81 {\r\n\tright: 0;\r\n}\r\n\r\n.prev-81 {\r\n\tleft: 0;\r\n}\r\n\r\n.toggleDiapo-81 {\r\n\tposition: absolute;\r\n\tbottom: 0;\r\n\tleft: 50%;\r\n\tmargin-left: -30px;\r\n\tfont-size: 30px;\r\n\tcolor: goldenrod;\r\n\tfont-weight: bold;\r\n\tcursor: pointer;\r\n\tpadding: 5px;\r\n\tuser-select: none;\r\n\t-webkit-user-select: none;\r\n\r\n}\r\n\r\n.fullscreen-81 {\r\n\tposition: absolute;\r\n\ttop: 10px;\r\n\tright: 10px;\r\n\tcursor: pointer;\r\n\tuser-select: none;\r\n}\r\n\r\n.prev-81:hover,\r\n.next-81:hover,\r\n.toggleDiapo-81:hover,\r\n.fullscreen-81:hover {\r\n\tbackground-color: rgba(0, 0, 0, 0.8);\r\n}\r\n\r\n.counter-81 {\r\n\tposition: absolute;\r\n\tborder-radius: 50%;\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\twidth: 50px;\r\n\theight: 50px;\r\n\ttop: 1.4%;\r\n\tleft: 0.9%;\r\n\tbackground-color: rgba(0, 0, 0, 0.8);\r\n\tborder: 2px solid rgb(212, 207, 207);\r\n\tcolor: white;\r\n\tfont: 1.5em Arial, sans-serif;\r\n}\r\n\r\n.fullscreen-container-81 {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\tbottom: 0;\r\n\tright: 0;\r\n\tz-index: 10 ;\r\n\tbackground-color: rgba(0, 0, 0, 0.9) ;\r\n\tdisplay: block ;\r\n}\r\n\r\n.fullscreen-div-81 {\r\n\twidth: 100% !important; \r\n\theight: 100% !important;\r\n\tdisplay: block ;\r\n\tmargin: auto;\r\n\tposition: relative;\r\n\ttop: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\tright: 0;\r\n\tbox-sizing: content-box;\r\n}\r\n\r\n.hidden-81 {\r\n\tdisplay: none;\r\n}\r\n\r\n.counter-81,\r\n.fullscreen-81,\r\n.prev-81,\r\n.next-81,\r\n.toggleDiapo-81 {\r\n\tz-index: 5;\r\n}\r\n\r\n.remove-fullscreen-81 {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tright: 0;\r\n\tcursor: pointer;\r\n}\r\n\r\n.remove-fullscreen-81:hover {\r\n\tbackground-color: rgba(0, 0, 0, 0.8);\r\n}\r\n\r\n<\/style>\r\n<script>\r\nwindow.myNameSpace = window.myNameSpace || {};\r\n\r\njQuery(function () {\r\n\r\n\t\/\/ load images\r\n\tjQuery.fn.addImage = function (filename, description) {\r\n\t\tvar img = document.createElement('img');\r\n\t\timg.src = \"images\/\" + filename;\r\n\t\timg.alt = description;\r\n\t\timg.className = \"thumbnail-81\";\r\n\t\tjQuery(this).append(img);\r\n\t}\r\n\r\n\t\/\/ check if element is hidden after scrollbar\r\n\tjQuery.fn.overflown = function () {\r\n\t\tvar limitLeft = jQuery('.wrapper-81').offset().left;\r\n\t\tvar limitRight = limitLeft + jQuery('.wrapper-81').width();\r\n\t\tvar elemOffsetLeft = jQuery(this[0]).offset().left;\r\n\t\tvar elemOffsetRight = elemOffsetLeft + jQuery(this[0]).width() \/ 2;\r\n\t\treturn (elemOffsetRight > limitRight || elemOffsetLeft < limitLeft) ? true : false;\r\n\t}\r\n\r\n\t\/\/ scroll to the end of element\r\n\tfunction scrollToElement(el, direction) {\r\n\t\telement_width = el.width();\r\n\t\tscroll_left = jQuery('.wrapper-81')[0].scrollLeft;\r\n\t\tif (direction == 'next')\r\n\t\t\tjQuery('.wrapper-81')[0].scrollTo(scroll_left + element_width, 0);\r\n\t\telse if (direction == 'prev')\r\n\t\t\tjQuery('.wrapper-81')[0].scrollTo(scroll_left - element_width, 0);\r\n\t}\r\n\r\n\tfunction showNextImg() {\r\n\t\tclearInterval(interv);\r\n\t\t\r\n\t\tinterv = setInterval(showNextImg, 3000);\r\n\t\t\r\n\t\tvar el = jQuery('.selected-81');\r\n\t\tvar counter = jQuery('.counter-81');\r\n\t\tif (el.next().length != 0) {\r\n\t\t\tcounter.text(el.index() + 1);\r\n\t\t\tif (el.next().overflown())\r\n\t\t\t\tscrollToElement(el, 'next');\r\n\t\t\t\/\/el.fadeOut(200, () => {\r\n\t\t\t\tel.next().trigger('click');\r\n\t\t\t\tel.show();\r\n\t\t\t\/\/});\r\n\t\t}\r\n\t\telse {\r\n\t\t\tjQuery('.thumbnail-81:first').trigger('click');\r\n\t\t\tjQuery('.wrapper-81')[0].scrollTo(0, 0);\r\n\t\t\tcounter.text('1');\r\n\t\t}\r\n\t\tjQuery('.toggleDiapo-81').attr('src', 'https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/pause_diapo.png');\r\n\t}\r\n\r\n\tfunction showPrevImg() {\r\n\t\tclearInterval(interv);\r\n\r\n\t\tinterv = setInterval(showNextImg, 3000);\r\n\r\n\t\tvar el = jQuery('.selected-81');\r\n\t\tvar counter = jQuery('.counter-81');\r\n\t\tif (el.prev().length != 0) {\r\n\t\t\tcounter.text(el.index() + 1);\r\n\t\t\tif (el.prev().overflown())\r\n\t\t\t\tscrollToElement(el, 'prev');\r\n\t\t\tel.prev().trigger('click');\r\n\t\t}\r\n\t\telse {\r\n\t\t\tjQuery('.thumbnail-81:last').trigger('click');\r\n\t\t\tjQuery('.wrapper-81')[0].scrollTo(jQuery('.wrapper-81')[0].scrollWidth, 0);\r\n\t\t\tcounter.text(jQuery('.thumbnail-81:last').index() + 1);\r\n\t\t}\r\n\t\tjQuery('.toggleDiapo-81').attr('src', 'https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/pause_diapo.png' );\r\n\t}\r\n\r\n\tfunction previewImg(e) {\r\n\t\tif (e.originalEvent !== undefined) {\r\n\t\t\tjQuery('.toggleDiapo-81').attr('src', 'https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/play_diapo.png');\r\n\t\t\tinterv = clearInterval(interv);\r\n\t\t}\r\n\t\tvar wrapper = jQuery('.wrapper-81');\r\n\t\tvar index = jQuery(this).index();\r\n\t\tjQuery('.selected-81').toggleClass('selected-81');\r\n\t\tjQuery(this).toggleClass('selected-81')\r\n\t\tjQuery(\"#caption-81\").text(jQuery('.selected-81').attr('alt'));\r\n\t\tjQuery('.counter-81').text(index + 1);\r\n\t\tvar src = jQuery(this).attr('src');\r\n\t\tjQuery('#preview-81').fadeOut(350, () => {\r\n\t\t\tjQuery('#preview-81').attr('src', src);\r\n\t\t\tjQuery('#preview-81').fadeIn(350);\r\n\t\t});\r\n\t}\r\n\r\n\tfunction toggleDiapo() {\r\n\t\tinterv = (interv != null) ? clearInterval(interv) : setInterval(showNextImg, 3000);\r\n\t\tvar src = jQuery('.toggleDiapo-81').attr('src');\r\n\t\tif (src == \"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/play_diapo.png\")\r\n\t\t\tjQuery('.toggleDiapo-81').attr('src', 'https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/pause_diapo.png' );\r\n\t\telse\r\n\t\t\tjQuery('.toggleDiapo-81').attr('src', 'https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/play_diapo.png');\r\n\t}\r\n\r\n\tfunction goFullscreen() {\r\n\t\tjQuery('.toggleDiapo-81').attr('src', 'https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/plugins\/slider-factory-pro\/layouts\/assets\/9\/icons\/remove_icon.webp' );\r\n\t\tinterv = clearInterval(interv);\r\n\r\n\t\tvar selected = jQuery('.selected-81').attr('src');\r\n\t\tvar container = jQuery('.fullscreen-container-81');\r\n\t\tjQuery('.fullscreen-div-81').css({\r\n\t\t\t'background-image': 'url(' + selected + ')',\r\n\t\t\t'background-size': 'contain',\r\n\t\t\t'background-repeat': 'no-repeat',\r\n\t\t\t'background-position': 'center'\r\n\t\t});\r\n\t\tcontainer.fadeIn('slow');\r\n\t\tcontainer.on('click', function () {\r\n\t\t\tjQuery(this).fadeOut('slow');\r\n\t\t});\r\n\t}\r\n\r\n\t\/\/ show first image.\r\n\tvar first = jQuery('.thumbnail-81:first').toggleClass('selected-81');\r\n\tjQuery('.counter-81').text('1');\r\n\tjQuery('#preview-81').attr('src', first.attr('src'));\r\n\tjQuery(\"#caption-81\").text(first.attr('alt'));\r\n\t\/\/ start auto diapo.\r\n\tvar interv;\r\n\t\tinterv = setInterval(showNextImg, 3000);\r\n\t\t\r\n\t\/\/ setup event listeners.\r\n\tjQuery('.next-81').on('click', showNextImg);\r\n\tjQuery('.prev-81').on('click', showPrevImg);\r\n\tjQuery('.thumbnail-81').on('click', previewImg);\r\n\tjQuery('.toggleDiapo-81').on('click', toggleDiapo);\r\n\tjQuery('.fullscreen-81').on('click', goFullscreen);\r\n\r\n});\r\n<\/script>\r\n\n<p>\n<br \/><\/p>\r\n<div class=\"wp-block-spacer\" style=\"height: 25px;\" aria-hidden=\"true\">\u00a0<\/div>\r\n<p>\r\n\r\n<strong>Settings Used :<\/strong> Width &#8211; 100%, Height &#8211; 650px, Auto Play on Load &#8211; ON, Auto Play Speed &#8211; 4000ms, Fade Speed &#8211; 1000ms<\/p>\r\n<p><br \/><br \/>\u00a0<\/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;\">Youtube Tutorial<\/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=4jbnGwIlMk0&#8243;][\/vc_column][\/vc_row]<\/p>","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column][vc_column_text] A Basic Example Settings Used : Width &#8211; 100%, Height &#8211; 720px, Auto Play on Load &#8211; ON, Auto Play Speed &#8211; 3000ms, Fade Speed &#8211; 350ms Settings Used : Width &#8211; 100%, Height &#8211; 650px, Auto Play on Load &#8211; ON, Auto Play Speed &#8211; 4000ms, Fade Speed &#8211; 1000ms \u00a0 [\/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] Youtube [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":15,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2413","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/2413","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=2413"}],"version-history":[{"count":14,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/2413\/revisions"}],"predecessor-version":[{"id":3606,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/2413\/revisions\/3606"}],"wp:attachment":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/media?parent=2413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}