{"id":928,"date":"2021-03-02T11:24:07","date_gmt":"2021-03-02T11:24:07","guid":{"rendered":"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/?page_id=928"},"modified":"2021-03-03T08:47:57","modified_gmt":"2021-03-03T08:47:57","slug":"layout-9","status":"publish","type":"page","link":"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/layout-9\/","title":{"rendered":"Layout 9"},"content":{"rendered":"<p>[vc_row][vc_column][vc_column_text]<\/p>\n<h3 style=\"text-align: center;\"><strong>A Basic Example<\/strong><\/h3>\n<p>[\/vc_column_text][vc_empty_space][vc_column_text]<div id=\"sf-9-33\">\n\t<div class=\"fullscreen-container-33 hidden-33\">\n\t\t<div class='fullscreen-div-33'>\n\t\t\t<img decoding=\"async\" class=\"remove-fullscreen-33\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/plugins\/slider-factory\/layouts\/assets\/9\/icons\/remove_icon.webp\" width=\"60\" \/>\n\t\t<\/div>\n\t<\/div>\n\n\t<div id=\"sf-9-gallery-33\">\n\t\t<div id=\"slide-33\">\n\t\t\t<div class=\"counter-33\"><\/div>\n\t\t\t<a class=\"prev-33\">&#x2039;<\/a>\n\t\t\t<a class=\"next-33\">&#x203A;<\/a>\n\t\t\t\t\t\t<img decoding=\"async\" class=\"toggleDiapo-33\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/plugins\/slider-factory\/layouts\/assets\/9\/icons\/pause_diapo.png\" width=\"40\" \/>\n\t\t\t\t\t\t\n\t\t\t<img decoding=\"async\" class=\"fullscreen-33\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/plugins\/slider-factory\/layouts\/assets\/9\/icons\/fullscreen.png\" width=\"40\" \/>\n\t\t\t<img id='preview-33' \/>\n\t\t<\/div>\n\n\t\t<div class=\"caption-container-33\">\n\t\t\t<span id=\"caption-33\"><\/span>\n\t\t<\/div>\n\n\t\t<div id=\"thumbnails\" style=\"text-align:center; display: none;\">\n\t\t\t<div class=\"wrapper-33\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-33\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/03\/pexels-photo-208321.jpeg\" alt=\"\">\n\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-33\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/03\/6914592-tropical-island.jpg\" alt=\"\">\n\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-33\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/03\/pexels-photo-872831.jpeg\" alt=\"\">\n\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-33\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/03\/6961160-tropical-beach-bar.jpg\" alt=\"\">\n\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-33\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/03\/pexels-photo-1662549.jpeg\" alt=\"\">\n\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-33\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/03\/7027770-tropical-beach-hd.jpg\" alt=\"\">\n\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-33\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/03\/6985867-tropical-island-maldives.jpg\" alt=\"\">\n\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-33\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/03\/6935710-maldives-diggiri-island.jpg\" alt=\"\">\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n<style>\n#sf-9-33 {\n\twidth: 100% !important;\n}\n\n#img-33 {\n\n}\n\n.caption-container-33 {\n\tbackground-color: #000000;\n\ttext-align: center;\n\tpadding: 6px 8px;\n\tcolor : #ffffff;\n\twidth: 100% !important;\n}\n\n#thumbnails {\n\twhite-space: nowrap;\n\theight: 20%;\n\twidth: 100%;\n}\n\n.wrapper-33 {\n\tposition: relative;\n\toverflow: scroll;\n\tscroll-behavior: smooth;\n\twidth: 100% !important;\n}\n\n.wrapper-33::-webkit-scrollbar {\n\tdisplay: none;\n}\n\n\/* Hide scrollbar for IE and Edge *\/\n.wrapper-33 {\n\t-ms-overflow-style: none;\n}\n\n#slide-33 {\n\tposition: relative;\n\toverflow: hidden;\n}\n\n#preview-33 {\n\theight: 800px !important;\n\twidth: 100% !important;\n\tobject-fit: fill; \/*Object-fit properties are cover, contain, fit ,scale-down and none. *\/\n}\n\n.thumbnail-33 {\n\twidth: 170px;\n\theight: 140px;\n\topacity: 0.5;\n\tdisplay: unset !important;\n}\n\n.selected-33 {\n\topacity: 1;\n}\n\n.thumbnail-33:hover {\n\topacity: 1;\n}\n\n#sf-9-gallery-33 {\n\twidth: 100%;\n\tmargin: auto;\n\tpadding: auto;\n}\n\n\/* .caption-container {\n\tbackground-color :#252525;\n\ttext-align: center;\n\tpadding: 6px 8px;\n\tcolor : red;\n} OLD CONTAINER CSS *\/\n\n.prev-33,\n.next-33 {\n\tcursor: pointer;\n\tposition: absolute;\n\ttop: 50%;\n\twidth: auto;\n\tpadding: 16px;\n\tmargin-top: -50px;\n\tcolor: white;\n\tfont-weight: bold;\n\tfont-size: 100px;\n\tborder-radius: 0 3px 3px 0;\n\tuser-select: none;\n\t-webkit-user-select: none;\n}\n\n.next-33 {\n\tright: 0;\n}\n\n.prev-33 {\n\tleft: 0;\n}\n\n.toggleDiapo-33 {\n\tposition: absolute;\n\tbottom: 0;\n\tleft: 50%;\n\tmargin-left: -30px;\n\tfont-size: 30px;\n\tcolor: goldenrod;\n\tfont-weight: bold;\n\tcursor: pointer;\n\tpadding: 5px;\n\tuser-select: none;\n\t-webkit-user-select: none;\n}\n\n.fullscreen-33 {\n\tposition: absolute;\n\ttop: 10px;\n\tright: 10px;\n\tcursor: pointer;\n\tuser-select: none;\n}\n\n.prev-33:hover,\n.next-33:hover,\n.toggleDiapo-33:hover,\n.fullscreen-33:hover {\n\tbackground-color: rgba(0, 0, 0, 0.8);\n}\n\n.counter-33 {\n\tposition: absolute;\n\tborder-radius: 50%;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 50px;\n\theight: 50px;\n\ttop: 1.4%;\n\tleft: 0.9%;\n\tbackground-color: rgba(0, 0, 0, 0.8);\n\tborder: 2px solid rgb(212, 207, 207);\n\tcolor: white;\n\tfont: 1.5em Arial, sans-serif;\n}\n\n.fullscreen-container-33 {\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tbottom: 0;\n\tright: 0;\n\tz-index: 10 ;\n\tbackground-color: rgba(0, 0, 0, 0.9) ;\n\tdisplay: block ;\n}\n\n.fullscreen-div-33 {\n\twidth: 100% !important; \n\theight: 100% !important;\n\tdisplay: block ;\n\tmargin: auto;\n\tposition: relative;\n\ttop: 0;\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n\tbox-sizing: content-box;\n}\n\n.hidden-33 {\n\tdisplay: none;\n}\n\n.counter-33,\n.fullscreen-33,\n.prev-33,\n.next-33,\n.toggleDiapo-33 {\n\tz-index: 5;\n}\n\n.remove-fullscreen-33 {\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tcursor: pointer;\n}\n\n.remove-fullscreen-33:hover {\n\tbackground-color: rgba(0, 0, 0, 0.8);\n}\n<\/style>\n<script>\nwindow.myNameSpace = window.myNameSpace || {};\n\njQuery(function () {\n\n\t\/\/ load images\n\tjQuery.fn.addImage = function (filename, description) {\n\t\tvar img = document.createElement('img');\n\t\timg.src = \"images\/\" + filename;\n\t\timg.alt = description;\n\t\timg.className = \"thumbnail-33\";\n\t\tjQuery(this).append(img);\n\t}\n\n\t\/\/ check if element is hidden after scrollbar\n\tjQuery.fn.overflown = function () {\n\t\tvar limitLeft = jQuery('.wrapper-33').offset().left;\n\t\tvar limitRight = limitLeft + jQuery('.wrapper-33').width();\n\t\tvar elemOffsetLeft = jQuery(this[0]).offset().left;\n\t\tvar elemOffsetRight = elemOffsetLeft + jQuery(this[0]).width() \/ 2;\n\t\treturn (elemOffsetRight > limitRight || elemOffsetLeft < limitLeft) ? true : false;\n\t}\n\n\t\/\/ scroll to the end of element\n\tfunction scrollToElement(el, direction) {\n\t\telement_width = el.width();\n\t\tscroll_left = jQuery('.wrapper-33')[0].scrollLeft;\n\t\tif (direction == 'next')\n\t\t\tjQuery('.wrapper-33')[0].scrollTo(scroll_left + element_width, 0);\n\t\telse if (direction == 'prev')\n\t\t\tjQuery('.wrapper-33')[0].scrollTo(scroll_left - element_width, 0);\n\t}\n\n\tfunction showNextImg() {\n\t\tclearInterval(interv);\n\t\t\n\t\tinterv = setInterval(showNextImg, 4000);\n\t\t\n\t\tvar el = jQuery('.selected-33');\n\t\tvar counter = jQuery('.counter-33');\n\t\tif (el.next().length != 0) {\n\t\t\tcounter.text(el.index() + 1);\n\t\t\tif (el.next().overflown())\n\t\t\t\tscrollToElement(el, 'next');\n\t\t\t\/\/el.fadeOut(200, () => {\n\t\t\t\tel.next().trigger('click');\n\t\t\t\tel.show();\n\t\t\t\/\/});\n\t\t}\n\t\telse {\n\t\t\tjQuery('.thumbnail-33:first').trigger('click');\n\t\t\tjQuery('.wrapper-33')[0].scrollTo(0, 0);\n\t\t\tcounter.text('1');\n\t\t}\n\t\tjQuery('.toggleDiapo-33').attr('src', \"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/plugins\/slider-factory\/layouts\/assets\/9\/icons\/pause_diapo.png\");\n\t}\n\n\tfunction showPrevImg() {\n\t\tclearInterval(interv);\n\t\t\n\t\tinterv = setInterval(showNextImg, 4000);\n\t\t\n\t\tvar el = jQuery('.selected-33');\n\t\tvar counter = jQuery('.counter-33');\n\t\tif (el.prev().length != 0) {\n\t\t\tcounter.text(el.index() + 1);\n\t\t\tif (el.prev().overflown())\n\t\t\t\tscrollToElement(el, 'prev');\n\t\t\tel.prev().trigger('click');\n\t\t}\n\t\telse {\n\t\t\tjQuery('.thumbnail-33:last').trigger('click');\n\t\t\tjQuery('.wrapper-33')[0].scrollTo(jQuery('.wrapper-33')[0].scrollWidth, 0);\n\t\t\tcounter.text(jQuery('.thumbnail-33:last').index() + 1);\n\t\t}\n\t\tjQuery('.toggleDiapo-33').attr('src', \"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/plugins\/slider-factory\/layouts\/assets\/9\/icons\/pause_diapo.png\");\n\t}\n\n\tfunction previewImg(e) {\n\t\tif (e.originalEvent !== undefined) {\n\t\t\tjQuery('.toggleDiapo-33').attr('src', \"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/plugins\/slider-factory\/layouts\/assets\/9\/icons\/play_diapo.png\");\n\t\t\tinterv = clearInterval(interv);\n\t\t}\n\t\tvar wrapper = jQuery('.wrapper-33');\n\t\tvar index = jQuery(this).index();\n\t\tjQuery('.selected-33').toggleClass('selected-33');\n\t\tjQuery(this).toggleClass('selected-33')\n\t\tjQuery(\"#caption-33\").text(jQuery('.selected-33').attr('alt'));\n\t\tjQuery('.counter-33').text(index + 1);\n\t\tvar src = jQuery(this).attr('src');\n\t\tjQuery('#preview-33').fadeOut(300, () => {\n\t\t\tjQuery('#preview-33').attr('src', src);\n\t\t\tjQuery('#preview-33').fadeIn(300);\n\t\t});\n\t}\n\n\tfunction toggleDiapo() {\n\t\tinterv = (interv != null) ? clearInterval(interv) : setInterval(showNextImg, 4000);\n\t\tvar src = jQuery('.toggleDiapo-33').attr('src');\n\t\tif (src == \"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/plugins\/slider-factory\/layouts\/assets\/9\/icons\/play_diapo.png\")\n\t\t\tjQuery('.toggleDiapo-33').attr('src', \"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/plugins\/slider-factory\/layouts\/assets\/9\/icons\/pause_diapo.png\");\n\t\telse\n\t\t\tjQuery('.toggleDiapo-33').attr('src', \"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/plugins\/slider-factory\/layouts\/assets\/9\/icons\/play_diapo.png\");\n\t}\n\n\tfunction goFullscreen() {\n\t\tjQuery('.toggleDiapo-33').attr('src', \"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/plugins\/slider-factory\/layouts\/assets\/9\/icons\/remove_icon.webp\");\n\t\tinterv = clearInterval(interv);\n\n\t\tvar selected = jQuery('.selected-33').attr('src');\n\t\tvar container = jQuery('.fullscreen-container-33');\n\t\tjQuery('.fullscreen-div-33').css({\n\t\t\t'background-image': 'url(' + selected + ')',\n\t\t\t'background-size': 'contain',\n\t\t\t'background-repeat': 'no-repeat',\n\t\t\t'background-position': 'center'\n\t\t});\n\t\tcontainer.fadeIn('slow');\n\t\tcontainer.on('click', function () {\n\t\t\tjQuery(this).fadeOut('slow');\n\t\t});\n\t}\n\n\t\/\/ show first image\n\tvar first = jQuery('.thumbnail-33:first').toggleClass('selected-33');\n\tjQuery('.counter-33').text('1');\n\tjQuery('#preview-33').attr('src', first.attr('src'));\n\tjQuery(\"#caption-33\").text(first.attr('alt'));\n\t\/\/ start auto diapo\n\tvar interv;\n\t\tinterv = setInterval(showNextImg, 4000);\n\t\t\n\t\/\/ setup event listeners\n\tjQuery('.next-33').on('click', showNextImg);\n\tjQuery('.prev-33').on('click', showPrevImg);\n\tjQuery('.thumbnail-33').on('click', previewImg);\n\tjQuery('.toggleDiapo-33').on('click', toggleDiapo);\n\tjQuery('.fullscreen-33').on('click', goFullscreen);\n\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<h3 style=\"text-align: center;\"><strong>Slide Show With Slide Title\u00a0<\/strong><\/h3>\n<p>[\/vc_column_text][vc_empty_space][vc_column_text]<div id=\"sf-9-34\">\n\t<div class=\"fullscreen-container-34 hidden-34\">\n\t\t<div class='fullscreen-div-34'>\n\t\t\t<img decoding=\"async\" class=\"remove-fullscreen-34\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/plugins\/slider-factory\/layouts\/assets\/9\/icons\/remove_icon.webp\" width=\"60\" \/>\n\t\t<\/div>\n\t<\/div>\n\n\t<div id=\"sf-9-gallery-34\">\n\t\t<div id=\"slide-34\">\n\t\t\t<div class=\"counter-34\"><\/div>\n\t\t\t<a class=\"prev-34\">&#x2039;<\/a>\n\t\t\t<a class=\"next-34\">&#x203A;<\/a>\n\t\t\t\t\t\t<img decoding=\"async\" class=\"toggleDiapo-34\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/plugins\/slider-factory\/layouts\/assets\/9\/icons\/pause_diapo.png\" width=\"40\" \/>\n\t\t\t\t\t\t\n\t\t\t<img decoding=\"async\" class=\"fullscreen-34\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/plugins\/slider-factory\/layouts\/assets\/9\/icons\/fullscreen.png\" width=\"40\" \/>\n\t\t\t<img id='preview-34' \/>\n\t\t<\/div>\n\n\t\t<div class=\"caption-container-34\">\n\t\t\t<span id=\"caption-34\"><\/span>\n\t\t<\/div>\n\n\t\t<div id=\"thumbnails\" style=\"text-align:center; display: none;\">\n\t\t\t<div class=\"wrapper-34\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-34\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/03\/pexels-george-desipris-1028637.jpg\" alt=\"Colorful Drinks\">\n\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-34\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/03\/pexels-photomix-company-96974.jpg\" alt=\"Lime Drink\">\n\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-34\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/03\/pexels-susanne-jutzeler-1233319.jpg\" alt=\"Susanne Jutzeler\">\n\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-34\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/03\/pexels-ahmad-syahrir-605408.jpg\" alt=\"Drinks\">\n\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-34\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/03\/pexels-markus-spiske-128242.jpg\" alt=\"Markus Pisky\">\n\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-34\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/03\/pexels-one-shot-2789328.jpg\" alt=\"Cold Summer Drink\">\n\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-34\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/03\/pexels-designbyja-2109099.jpg\" alt=\"Lemon Juice\">\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n<style>\n#sf-9-34 {\n\twidth: 100% !important;\n}\n\n#img-34 {\n\n}\n\n.caption-container-34 {\n\tbackground-color: #000000;\n\ttext-align: center;\n\tpadding: 6px 8px;\n\tcolor : #ffffff;\n\twidth: 100% !important;\n}\n\n#thumbnails {\n\twhite-space: nowrap;\n\theight: 20%;\n\twidth: 100%;\n}\n\n.wrapper-34 {\n\tposition: relative;\n\toverflow: scroll;\n\tscroll-behavior: smooth;\n\twidth: 100% !important;\n}\n\n.wrapper-34::-webkit-scrollbar {\n\tdisplay: none;\n}\n\n\/* Hide scrollbar for IE and Edge *\/\n.wrapper-34 {\n\t-ms-overflow-style: none;\n}\n\n#slide-34 {\n\tposition: relative;\n\toverflow: hidden;\n}\n\n#preview-34 {\n\theight: 700px !important;\n\twidth: 100% !important;\n\tobject-fit: fill; \/*Object-fit properties are cover, contain, fit ,scale-down and none. *\/\n}\n\n.thumbnail-34 {\n\twidth: 170px;\n\theight: 140px;\n\topacity: 0.5;\n\tdisplay: unset !important;\n}\n\n.selected-34 {\n\topacity: 1;\n}\n\n.thumbnail-34:hover {\n\topacity: 1;\n}\n\n#sf-9-gallery-34 {\n\twidth: 100%;\n\tmargin: auto;\n\tpadding: auto;\n}\n\n\/* .caption-container {\n\tbackground-color :#252525;\n\ttext-align: center;\n\tpadding: 6px 8px;\n\tcolor : red;\n} OLD CONTAINER CSS *\/\n\n.prev-34,\n.next-34 {\n\tcursor: pointer;\n\tposition: absolute;\n\ttop: 50%;\n\twidth: auto;\n\tpadding: 16px;\n\tmargin-top: -50px;\n\tcolor: white;\n\tfont-weight: bold;\n\tfont-size: 100px;\n\tborder-radius: 0 3px 3px 0;\n\tuser-select: none;\n\t-webkit-user-select: none;\n}\n\n.next-34 {\n\tright: 0;\n}\n\n.prev-34 {\n\tleft: 0;\n}\n\n.toggleDiapo-34 {\n\tposition: absolute;\n\tbottom: 0;\n\tleft: 50%;\n\tmargin-left: -30px;\n\tfont-size: 30px;\n\tcolor: goldenrod;\n\tfont-weight: bold;\n\tcursor: pointer;\n\tpadding: 5px;\n\tuser-select: none;\n\t-webkit-user-select: none;\n}\n\n.fullscreen-34 {\n\tposition: absolute;\n\ttop: 10px;\n\tright: 10px;\n\tcursor: pointer;\n\tuser-select: none;\n}\n\n.prev-34:hover,\n.next-34:hover,\n.toggleDiapo-34:hover,\n.fullscreen-34:hover {\n\tbackground-color: rgba(0, 0, 0, 0.8);\n}\n\n.counter-34 {\n\tposition: absolute;\n\tborder-radius: 50%;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 50px;\n\theight: 50px;\n\ttop: 1.4%;\n\tleft: 0.9%;\n\tbackground-color: rgba(0, 0, 0, 0.8);\n\tborder: 2px solid rgb(212, 207, 207);\n\tcolor: white;\n\tfont: 1.5em Arial, sans-serif;\n}\n\n.fullscreen-container-34 {\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tbottom: 0;\n\tright: 0;\n\tz-index: 10 ;\n\tbackground-color: rgba(0, 0, 0, 0.9) ;\n\tdisplay: block ;\n}\n\n.fullscreen-div-34 {\n\twidth: 100% !important; \n\theight: 100% !important;\n\tdisplay: block ;\n\tmargin: auto;\n\tposition: relative;\n\ttop: 0;\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n\tbox-sizing: content-box;\n}\n\n.hidden-34 {\n\tdisplay: none;\n}\n\n.counter-34,\n.fullscreen-34,\n.prev-34,\n.next-34,\n.toggleDiapo-34 {\n\tz-index: 5;\n}\n\n.remove-fullscreen-34 {\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tcursor: pointer;\n}\n\n.remove-fullscreen-34:hover {\n\tbackground-color: rgba(0, 0, 0, 0.8);\n}\n<\/style>\n<script>\nwindow.myNameSpace = window.myNameSpace || {};\n\njQuery(function () {\n\n\t\/\/ load images\n\tjQuery.fn.addImage = function (filename, description) {\n\t\tvar img = document.createElement('img');\n\t\timg.src = \"images\/\" + filename;\n\t\timg.alt = description;\n\t\timg.className = \"thumbnail-34\";\n\t\tjQuery(this).append(img);\n\t}\n\n\t\/\/ check if element is hidden after scrollbar\n\tjQuery.fn.overflown = function () {\n\t\tvar limitLeft = jQuery('.wrapper-34').offset().left;\n\t\tvar limitRight = limitLeft + jQuery('.wrapper-34').width();\n\t\tvar elemOffsetLeft = jQuery(this[0]).offset().left;\n\t\tvar elemOffsetRight = elemOffsetLeft + jQuery(this[0]).width() \/ 2;\n\t\treturn (elemOffsetRight > limitRight || elemOffsetLeft < limitLeft) ? true : false;\n\t}\n\n\t\/\/ scroll to the end of element\n\tfunction scrollToElement(el, direction) {\n\t\telement_width = el.width();\n\t\tscroll_left = jQuery('.wrapper-34')[0].scrollLeft;\n\t\tif (direction == 'next')\n\t\t\tjQuery('.wrapper-34')[0].scrollTo(scroll_left + element_width, 0);\n\t\telse if (direction == 'prev')\n\t\t\tjQuery('.wrapper-34')[0].scrollTo(scroll_left - element_width, 0);\n\t}\n\n\tfunction showNextImg() {\n\t\tclearInterval(interv);\n\t\t\n\t\tinterv = setInterval(showNextImg, 4000);\n\t\t\n\t\tvar el = jQuery('.selected-34');\n\t\tvar counter = jQuery('.counter-34');\n\t\tif (el.next().length != 0) {\n\t\t\tcounter.text(el.index() + 1);\n\t\t\tif (el.next().overflown())\n\t\t\t\tscrollToElement(el, 'next');\n\t\t\t\/\/el.fadeOut(200, () => {\n\t\t\t\tel.next().trigger('click');\n\t\t\t\tel.show();\n\t\t\t\/\/});\n\t\t}\n\t\telse {\n\t\t\tjQuery('.thumbnail-34:first').trigger('click');\n\t\t\tjQuery('.wrapper-34')[0].scrollTo(0, 0);\n\t\t\tcounter.text('1');\n\t\t}\n\t\tjQuery('.toggleDiapo-34').attr('src', \"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/plugins\/slider-factory\/layouts\/assets\/9\/icons\/pause_diapo.png\");\n\t}\n\n\tfunction showPrevImg() {\n\t\tclearInterval(interv);\n\t\t\n\t\tinterv = setInterval(showNextImg, 4000);\n\t\t\n\t\tvar el = jQuery('.selected-34');\n\t\tvar counter = jQuery('.counter-34');\n\t\tif (el.prev().length != 0) {\n\t\t\tcounter.text(el.index() + 1);\n\t\t\tif (el.prev().overflown())\n\t\t\t\tscrollToElement(el, 'prev');\n\t\t\tel.prev().trigger('click');\n\t\t}\n\t\telse {\n\t\t\tjQuery('.thumbnail-34:last').trigger('click');\n\t\t\tjQuery('.wrapper-34')[0].scrollTo(jQuery('.wrapper-34')[0].scrollWidth, 0);\n\t\t\tcounter.text(jQuery('.thumbnail-34:last').index() + 1);\n\t\t}\n\t\tjQuery('.toggleDiapo-34').attr('src', \"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/plugins\/slider-factory\/layouts\/assets\/9\/icons\/pause_diapo.png\");\n\t}\n\n\tfunction previewImg(e) {\n\t\tif (e.originalEvent !== undefined) {\n\t\t\tjQuery('.toggleDiapo-34').attr('src', \"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/plugins\/slider-factory\/layouts\/assets\/9\/icons\/play_diapo.png\");\n\t\t\tinterv = clearInterval(interv);\n\t\t}\n\t\tvar wrapper = jQuery('.wrapper-34');\n\t\tvar index = jQuery(this).index();\n\t\tjQuery('.selected-34').toggleClass('selected-34');\n\t\tjQuery(this).toggleClass('selected-34')\n\t\tjQuery(\"#caption-34\").text(jQuery('.selected-34').attr('alt'));\n\t\tjQuery('.counter-34').text(index + 1);\n\t\tvar src = jQuery(this).attr('src');\n\t\tjQuery('#preview-34').fadeOut(300, () => {\n\t\t\tjQuery('#preview-34').attr('src', src);\n\t\t\tjQuery('#preview-34').fadeIn(300);\n\t\t});\n\t}\n\n\tfunction toggleDiapo() {\n\t\tinterv = (interv != null) ? clearInterval(interv) : setInterval(showNextImg, 4000);\n\t\tvar src = jQuery('.toggleDiapo-34').attr('src');\n\t\tif (src == \"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/plugins\/slider-factory\/layouts\/assets\/9\/icons\/play_diapo.png\")\n\t\t\tjQuery('.toggleDiapo-34').attr('src', \"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/plugins\/slider-factory\/layouts\/assets\/9\/icons\/pause_diapo.png\");\n\t\telse\n\t\t\tjQuery('.toggleDiapo-34').attr('src', \"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/plugins\/slider-factory\/layouts\/assets\/9\/icons\/play_diapo.png\");\n\t}\n\n\tfunction goFullscreen() {\n\t\tjQuery('.toggleDiapo-34').attr('src', \"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/plugins\/slider-factory\/layouts\/assets\/9\/icons\/remove_icon.webp\");\n\t\tinterv = clearInterval(interv);\n\n\t\tvar selected = jQuery('.selected-34').attr('src');\n\t\tvar container = jQuery('.fullscreen-container-34');\n\t\tjQuery('.fullscreen-div-34').css({\n\t\t\t'background-image': 'url(' + selected + ')',\n\t\t\t'background-size': 'contain',\n\t\t\t'background-repeat': 'no-repeat',\n\t\t\t'background-position': 'center'\n\t\t});\n\t\tcontainer.fadeIn('slow');\n\t\tcontainer.on('click', function () {\n\t\t\tjQuery(this).fadeOut('slow');\n\t\t});\n\t}\n\n\t\/\/ show first image\n\tvar first = jQuery('.thumbnail-34:first').toggleClass('selected-34');\n\tjQuery('.counter-34').text('1');\n\tjQuery('#preview-34').attr('src', first.attr('src'));\n\tjQuery(\"#caption-34\").text(first.attr('alt'));\n\t\/\/ start auto diapo\n\tvar interv;\n\t\tinterv = setInterval(showNextImg, 4000);\n\t\t\n\t\/\/ setup event listeners\n\tjQuery('.next-34').on('click', showNextImg);\n\tjQuery('.prev-34').on('click', showPrevImg);\n\tjQuery('.thumbnail-34').on('click', previewImg);\n\tjQuery('.toggleDiapo-34').on('click', toggleDiapo);\n\tjQuery('.fullscreen-34').on('click', goFullscreen);\n\n});\n<\/script>\n[\/vc_column_text][vc_empty_space height=&#8221;150px&#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][vc_column_text][\/vc_column_text][vc_empty_space height=&#8221;200px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text] Slide Show With Slide Title\u00a0 [\/vc_column_text][vc_empty_space][vc_column_text][\/vc_column_text][vc_empty_space height=&#8221;150px&#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 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; [&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-928","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-json\/wp\/v2\/pages\/928","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=928"}],"version-history":[{"count":5,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-json\/wp\/v2\/pages\/928\/revisions"}],"predecessor-version":[{"id":991,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-json\/wp\/v2\/pages\/928\/revisions\/991"}],"wp:attachment":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-json\/wp\/v2\/media?parent=928"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}