{"id":1083,"date":"2021-01-28T07:44:35","date_gmt":"2021-01-28T07:44:35","guid":{"rendered":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/?page_id=1083"},"modified":"2021-07-02T12:06:06","modified_gmt":"2021-07-02T12:06:06","slug":"pets-slider","status":"publish","type":"page","link":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/pets-slider\/","title":{"rendered":"Pets Slider"},"content":{"rendered":"<p>[vc_row][vc_column][vc_column_text]<\/p>\n<h4 style=\"text-align: center;\"><span style=\"color: #999999;\"><strong>Slider By Layout 9\u00a0<\/strong><\/span><\/h4>\n<p>&nbsp;<\/p>\n<div id=\"sf-9-84\">\r\n\t<div class=\"fullscreen-container-84 hidden-84\">\r\n\t <div class='fullscreen-div-84'>\r\n\t\t<img decoding=\"async\" class=\"remove-fullscreen-84\" 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-84\">\r\n\t  <div id=\"slide-84\">\r\n\t\t<div class=\"counter-84\"><\/div>\r\n\t\t<a class=\"prev-84\">&#x2039;<\/a>\r\n\t\t<a class=\"next-84\">&#x203A;<\/a>\r\n\t\t\t\t\t<img decoding=\"async\" class=\"toggleDiapo-84\" 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-84\" 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-84' \/>\r\n\t  <\/div>\r\n\t  <div class=\"caption-container-84\">\r\n\t\t<span id=\"caption-84\"><\/span>\r\n\t  <\/div>\r\n\t  <div id=\"thumbnails\" style=\"text-align:center;\">\r\n\t\t<div class=\"wrapper-84\">\r\n\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-84\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/dog2.jpeg\" alt=\"Funny Dog\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-84\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/03\/kittens-cat-cat-puppy-rush-45170.jpeg\" alt=\"Kittens\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-84\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/bunny2.jpeg\" alt=\"Little Bunny\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-84\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/parrot2.jpeg\" alt=\"Parrot\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-84\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/cat2.jpeg\" alt=\"Cat\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-84\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/pexels-photo-1108099.jpeg\" alt=\"Puppies\">\r\n\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"thumbnail-84\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/pexels-photo-104373.jpeg\" alt=\"Bunny\">\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-84 {\r\n\twidth: 100% !important;\t\r\n}\r\n\r\n#img-84 {\r\n\t\r\n}\r\n\r\n.caption-container-84 {\r\n\tbackground-color: #91a696;\r\n\ttext-align: center;\r\n\tpadding: 6px 8px;\r\n\tcolor : #131111;\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-84 {\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-84::-webkit-scrollbar {\r\n\tdisplay: none;\r\n}\r\n\r\n\/* Hide scrollbar for IE and Edge *\/\r\n.wrapper-84 {\r\n\t-ms-overflow-style: none;\r\n}\r\n\r\n#slide-84 {\r\n\tposition: relative;\r\n\toverflow: hidden;\r\n}\r\n\r\n#preview-84 {\r\n\theight: 700px !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-84 {\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-84 {\r\n\topacity: 1;\r\n}\r\n\r\n.thumbnail-84:hover {\r\n\topacity: 1;\r\n}\r\n\r\n#sf-9-gallery-84 {\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-84,\r\n.next-84 {\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-84 {\r\n\tright: 0;\r\n}\r\n\r\n.prev-84 {\r\n\tleft: 0;\r\n}\r\n\r\n.toggleDiapo-84 {\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-84 {\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-84:hover,\r\n.next-84:hover,\r\n.toggleDiapo-84:hover,\r\n.fullscreen-84:hover {\r\n\tbackground-color: rgba(0, 0, 0, 0.8);\r\n}\r\n\r\n.counter-84 {\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-84 {\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-84 {\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-84 {\r\n\tdisplay: none;\r\n}\r\n\r\n.counter-84,\r\n.fullscreen-84,\r\n.prev-84,\r\n.next-84,\r\n.toggleDiapo-84 {\r\n\tz-index: 5;\r\n}\r\n\r\n.remove-fullscreen-84 {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tright: 0;\r\n\tcursor: pointer;\r\n}\r\n\r\n.remove-fullscreen-84: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-84\";\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-84').offset().left;\r\n\t\tvar limitRight = limitLeft + jQuery('.wrapper-84').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-84')[0].scrollLeft;\r\n\t\tif (direction == 'next')\r\n\t\t\tjQuery('.wrapper-84')[0].scrollTo(scroll_left + element_width, 0);\r\n\t\telse if (direction == 'prev')\r\n\t\t\tjQuery('.wrapper-84')[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-84');\r\n\t\tvar counter = jQuery('.counter-84');\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-84:first').trigger('click');\r\n\t\t\tjQuery('.wrapper-84')[0].scrollTo(0, 0);\r\n\t\t\tcounter.text('1');\r\n\t\t}\r\n\t\tjQuery('.toggleDiapo-84').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-84');\r\n\t\tvar counter = jQuery('.counter-84');\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-84:last').trigger('click');\r\n\t\t\tjQuery('.wrapper-84')[0].scrollTo(jQuery('.wrapper-84')[0].scrollWidth, 0);\r\n\t\t\tcounter.text(jQuery('.thumbnail-84:last').index() + 1);\r\n\t\t}\r\n\t\tjQuery('.toggleDiapo-84').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-84').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-84');\r\n\t\tvar index = jQuery(this).index();\r\n\t\tjQuery('.selected-84').toggleClass('selected-84');\r\n\t\tjQuery(this).toggleClass('selected-84')\r\n\t\tjQuery(\"#caption-84\").text(jQuery('.selected-84').attr('alt'));\r\n\t\tjQuery('.counter-84').text(index + 1);\r\n\t\tvar src = jQuery(this).attr('src');\r\n\t\tjQuery('#preview-84').fadeOut(400, () => {\r\n\t\t\tjQuery('#preview-84').attr('src', src);\r\n\t\t\tjQuery('#preview-84').fadeIn(400);\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-84').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-84').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-84').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-84').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-84').attr('src');\r\n\t\tvar container = jQuery('.fullscreen-container-84');\r\n\t\tjQuery('.fullscreen-div-84').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-84:first').toggleClass('selected-84');\r\n\tjQuery('.counter-84').text('1');\r\n\tjQuery('#preview-84').attr('src', first.attr('src'));\r\n\tjQuery(\"#caption-84\").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-84').on('click', showNextImg);\r\n\tjQuery('.prev-84').on('click', showPrevImg);\r\n\tjQuery('.thumbnail-84').on('click', previewImg);\r\n\tjQuery('.toggleDiapo-84').on('click', toggleDiapo);\r\n\tjQuery('.fullscreen-84').on('click', goFullscreen);\r\n\r\n});\r\n<\/script>\r\n\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #000000;\"><strong>Settings Used :<\/strong> Width \u2013 100%, Height \u2013 700px,\u00a0 Auto Play on Load \u2013 ON, Auto Play Speed \u2013 3000ms, Fade Speed \u2013 400ms, Caption Background Color &#8211; #91a696, Caption Text Color -#131111, Show Thumbnails- ON, Thumbnail Width -170px, Thumbnail height- 100px.<\/span>[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column][vc_column_text] Slider By Layout 9\u00a0 &nbsp; &nbsp; &nbsp; Settings Used : Width \u2013 100%, Height \u2013 700px,\u00a0 Auto Play on Load \u2013 ON, Auto Play Speed \u2013 3000ms, Fade Speed \u2013 400ms, Caption Background Color &#8211; #91a696, Caption Text Color -#131111, Show Thumbnails- ON, Thumbnail Width -170px, Thumbnail height- 100px.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":26,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1083","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/1083","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=1083"}],"version-history":[{"count":5,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/1083\/revisions"}],"predecessor-version":[{"id":3786,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/1083\/revisions\/3786"}],"wp:attachment":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/media?parent=1083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}