{"id":632,"date":"2021-01-27T13:33:29","date_gmt":"2021-01-27T13:33:29","guid":{"rendered":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/?page_id=632"},"modified":"2021-07-07T06:47:39","modified_gmt":"2021-07-07T06:47:39","slug":"quiz-slider","status":"publish","type":"page","link":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/quiz-slider\/","title":{"rendered":"Quiz slider \u200b"},"content":{"rendered":"<p>[vc_row][vc_column][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 style=\"text-align: center;\"><strong>Example 1\u00a0 By Layout 4\u00a0<\/strong><\/h3>\n<p>&nbsp;<\/p>\n<script>\r\njQuery( document ).ready(function() {\r\n\t\/\/ Avoid `console` errors in browsers that lack a console.\r\n\t(function () {\r\n\t\tvar method;\r\n\t\tvar noop = function () {};\r\n\t\tvar methods = [\r\n\t\t\t'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',\r\n\t\t\t'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',\r\n\t\t\t'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',\r\n\t\t\t'timeline', 'timelineEnd', 'timeStamp', 'trace', 'warn'\r\n\t\t];\r\n\t\tvar length = methods.length;\r\n\t\tvar console = (window.console = window.console || {});\r\n\r\n\t\twhile (length--) {\r\n\t\t\tmethod = methods[length];\r\n\r\n\t\t\t\/\/ Only stub undefined methods.\r\n\t\t\tif (!console[method]) {\r\n\t\t\t\tconsole[method] = noop;\r\n\t\t\t}\r\n\t\t}\r\n\t}());\r\n\r\n\tjQuery('.sf-4-133').camera({\r\n\t\/\/jQuery('.camera_wrap').camera({\r\n\r\n\t\t\/\/ you can also leave it blank\r\n\t\t\/\/minHeight: '200px',\r\n\t\tminHeight: '200px',\r\n\r\n\t\t\/\/ topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter, bottomRight\r\n\t\t\/\/alignment:'center',\r\n\t\talignment:'center',\r\n\r\n\t\t\/\/ true, false\r\n\t\t\/\/autoAdvance:true,\r\n\t\tautoAdvance:true,\r\n\r\n\t\t\/\/ true, false. Auto-advancing for mobile devices\r\n\t\t\/\/mobileAutoAdvance:false,\r\n\t\tmobileAutoAdvance:true,\r\n\r\n\r\n\t\t\/\/ true, false. Select true if you don't want that your images are cropped\r\n\t\t\/\/portrait: true,\r\n\t\tportrait: false,\r\n\r\n\r\n\t\t\/\/easing:'easeInOutExpo',\t\t\t\t\t\t\t\t\t\/\/jQuery easing effect list https:\/\/api.jqueryui.com\/easings\/\r\n\t\t\/\/mobileEasing:'',\t\t\t\t\t\t\t\t\/\/leave empty if you want to display the same easing on mobile devices and on desktop etc.\r\n\t\teasing:'easeInOutExpo',\t\t\t\t\t\t\t\t\t\/\/jQuery easing effect list https:\/\/api.jqueryui.com\/easings\/\r\n\t\tmobileEasing:'',\t\t\t\t\t\t\t\t\/\/leave empty if you want to display the same easing on mobile devices and on desktop etc.\r\n\r\n\t\t\/\/ 'random','simpleFade', 'curtainTopLeft', 'curtainTopRight', 'curtainBottomLeft', 'curtainBottomRight', 'curtainSliceLeft', 'curtainSliceRight', 'blindCurtainTopLeft', 'blindCurtainTopRight', 'blindCurtainBottomLeft', 'blindCurtainBottomRight', 'blindCurtainSliceBottom', 'blindCurtainSliceTop', 'stampede', 'mosaic', 'mosaicReverse', 'mosaicRandom', 'mosaicSpiral', 'mosaicSpiralReverse', 'topLeftBottomRight', 'bottomRightTopLeft', 'bottomLeftTopRight', 'bottomLeftTopRight'\r\n\t\t\/\/you can also use more than one effect, just separate them with commas: 'simpleFade, scrollRight, scrollBottom'\r\n\t\t\/\/fx:'random',\r\n\t\t\/\/mobileFx:'',\t\t\t\t\t\t\t\t\t\/\/ leave empty if you want to display the same effect on mobile devices and on desktop etc.\r\n\t\tfx:'random',\r\n\t\tmobileFx:'',\t\t\t\t\t\t\t\t\t\/\/ leave empty if you want to display the same effect on mobile devices and on desktop etc.\r\n\r\n\t\t\/\/ the number of columns\r\n\t\t\/\/cols: 6,\t\t\t\t\t\t\t\t\t\t\/\/ default 6\r\n\t\tcols: 6,\t\t\t\t\t\t\t\t\t\t\/\/ default 6\r\n\r\n\t\t\/\/ the number of rows\r\n\t\t\/\/rows: 8,\r\n\t\trows: 4,\r\n\t\t\/\/ if 0 the same value of cols\r\n\t\t\/\/slicedCols: 20,\r\n\t\tslicedCols: 12,\r\n\t\t\/\/ if 0 the same value of rows\r\n\t\t\/\/slicedRows: 20,\r\n\t\tslicedRows: 8,\r\n\r\n\t\t\/\/ to make the <a href=\"https:\/\/www.jqueryscript.net\/tags.php?\/grid\/\">grid<\/a> blocks slower than the slices, this value must be smaller than transPeriod\r\n\t\t\/\/gridDifference: 500,\r\n\t\tgridDifference: 250,\r\n\r\n\t\t\/\/ here you can type pixels (for instance '300px'), a percentage (relative to the width of the slideshow, for instance '50%') or 'auto'\r\n\t\t\/\/height: '60%',\r\n\t\theight: '60%',\r\n\r\n\t\t\/\/ the path to the image folder (it serves for the blank.gif, when you want to display <a href=\"https:\/\/www.jqueryscript.net\/tags.php?\/video\/\">video<\/a>s)\r\n\t\t\/\/imagePath:'images\/', \r\n\r\n\t\t\/\/hover:true,\t\t\t\t\t\t\t\t\t\t\/\/ true, false. Pause on state hover. Not available for mobile devices\r\n\t\thover:true,\r\n\r\n\r\n\t\t\/\/ pie, bar, none (even if you choose \"pie\", old browsers like IE8- can't display it... they will display always a loading bar)\r\n\t\t\/\/loader: 'pie', \r\n\t\t\/\/loaderColor: '#000000',\r\n\t\t\/\/loaderBgColor: '#ffffff',\r\n\t\tloader: 'pie', \r\n\t\tloaderColor: '#eeeeee',\r\n\t\tloaderBgColor: '#222222',\r\n\r\n\t\tloaderOpacity: .8,  \/\/0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1\r\n\t\tloaderPadding: 2,\r\n\t\tloaderStroke: 7,\r\n\r\n\t\t\/\/pieDiameter: 38,\r\n\t\t\/\/piePosition: 'rightTop', \t\t\t\t\t\/\/'rightTop', 'leftTop', 'leftBottom', 'rightBottom'\r\n\t\tpieDiameter: 38,\r\n\t\tpiePosition: 'rightBottom', \t\t\t\t\t\/\/'rightTop', 'leftTop', 'leftBottom', 'rightBottom'\r\n\r\n\t\tbarDirection:'leftToRight', \t\t\t\t\t\/\/ loading line in bottom - 'leftToRight', 'rightToLeft', 'topToBottom', 'bottomToTop'\r\n\t\tbarPosition:'bottom',\t\t\t\t\t\t\t\/\/ loading line in position - 'bottom', 'left', 'top', 'right'\r\n\r\n\r\n\t\t\/\/navigation: true,\t\t\t\t\t\t\t\t\/\/ true or false, to display or not the navigation buttons\r\n\t\t\/\/navigationHover: false,\t\t\t\t\t\t\t\/\/ visible on hover state only, if false they will be visible always\r\n\t\t\/\/mobileNavHover: false,\t\t\t\t\t\t\t\/\/ same as navigationHover, but only for mobile devices (not included in layout settings)\r\n\t\t\/\/playPause: true,\t\t\t\t\t\t\t\t\/\/true or false, to display or not the play\/pause buttons\r\n\t\tnavigation: true,\t\t\t\t\t\t\t\t\/\/ true or false, to display or not the navigation buttons\r\n\t\tnavigationHover: false,\t\t\t\t\t\t\t\/\/ visible on hover state only, if false they will be visible always\r\n\t\tmobileNavHover: false,\t\t\t\t\t\t\t\/\/ same as navigationHover, but only for mobile devices (not included in layout settings)\r\n\t\tplayPause: true,\t\t\t\t\t\t\t\t\/\/true or false, to display or not the play\/pause buttons\r\n\r\n\t\t\/\/ true, false. Decide to apply a fade effect to blocks and slices: if your slideshow is full screen or simply big, I recommend to set it false to have a smoother effect\r\n\t\topacityOnGrid: true,\r\n\t\t\/\/ a layer on the images to prevent the users grab them simply by clicking the right button of their mouse (.camera_overlayer)\r\n\t\toverlayer: true,\r\n\r\n\t\t\/\/1 None\r\n\t\t\t\tpagination: false,\t\t\t\t\t\t\t\t\/\/ enable pagination dots under slider\r\n\t\tthumbnails: false,\t\t\t\t\t\t\t\t\/\/ shows thumbnails\r\n\t\t\t\t\/\/1\r\n\r\n\t\t\/\/2 Dots\r\n\t\t\t\t\/\/2\r\n\r\n\t\t\/\/3 Thumbnails\r\n\t\t\t\t\/\/3\r\n\r\n\t\t\/\/pauseOnClick: true,\t\t\t\t\t\t\t\t\/\/ true, false. It stops the slideshow when you click the sliders.\r\n\t\tpauseOnClick: true,\r\n\r\n\r\n\t\t\/\/ next, prev, random: decide if the transition effect will be applied to the current (prev) or the next slide\r\n\t\tslideOn: 'random',\t\t\t\t\t\t\t\t\/\/ use the value as fx\r\n\r\n\r\n\r\n\t\t\/\/time: 7000,\t\t\t\t\t\t\t\t\t\t\/\/ milliseconds between the end of the sliding effect and the start of the next one\r\n\t\ttime: 7000,\t\t\t\t\t\t\t\t\t\t\/\/ milliseconds between the end of the sliding effect and the start of the next one\r\n\r\n\t\t\/\/transPeriod: 1500,\t\t\t\t\t\t\t\t\/\/ length of the sliding effect in milliseconds\r\n\t\ttransPeriod: 1500,\t\t\t\t\t\t\t\t\/\/ length of the sliding effect in milliseconds\r\n\t});\r\n\r\n});\r\n<\/script>\r\n\r\n<!-- slider start-->\r\n <div class=\"sf-4-133\">\r\n\t\t\t\t\t<div data-src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/07\/Untitled-design-1.jpg\" data-thumb=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/07\/Untitled-design-1-150x150.jpg\">\r\n\t\t\t\t\t<img decoding=\"async\" class=\"sf-3-slide-image\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/07\/Untitled-design-1.jpg\" alt=\"\">\r\n\r\n\t\t\t\t\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<div data-src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/07\/What-has-six-faces-but-does-not-wear-makeup-and-twenty-one-eyes-but-cannot-see-2.jpg\" data-thumb=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/07\/What-has-six-faces-but-does-not-wear-makeup-and-twenty-one-eyes-but-cannot-see-2-150x150.jpg\">\r\n\t\t\t\t\t<img decoding=\"async\" class=\"sf-3-slide-image\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/07\/What-has-six-faces-but-does-not-wear-makeup-and-twenty-one-eyes-but-cannot-see-2.jpg\" alt=\"\">\r\n\r\n\t\t\t\t\t\t\t\t\t<div class=\"camera_caption sf-4-slide-content\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"sf-4-slide-title\">YOUR TIME STARTS NOW<\/p>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<div data-src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/07\/What-has-six-faces-but-does-not-wear-makeup-and-twenty-one-eyes-but-cannot-see-1.jpg\" data-thumb=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/07\/What-has-six-faces-but-does-not-wear-makeup-and-twenty-one-eyes-but-cannot-see-1-150x150.jpg\">\r\n\t\t\t\t\t<img decoding=\"async\" class=\"sf-3-slide-image\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/07\/What-has-six-faces-but-does-not-wear-makeup-and-twenty-one-eyes-but-cannot-see-1.jpg\" alt=\"\">\r\n\r\n\t\t\t\t\t\t\t\t\t<div class=\"camera_caption sf-4-slide-content\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"sf-4-slide-title\">TIMES UP<\/p>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n<!-- slider end-->\r\n\r\n\r\n\r\n<style>\r\n.sf-4-133 {\r\n\twidth: 100%;\r\n\theight: 100%;\r\n}\r\n\r\n.sf-4-slide-content {\r\n\r\n}\r\n\r\n.sf-4-slide-title {\r\n\tcolor: #FFF;\r\n\tfont-size: 22px;\r\n}\r\n.sf-4-slide-desc {\r\n\tcolor: #FFF;\r\n\tfont-size: 18px;\r\n}\r\n\r\n\r\n\/********* hide slide content on mobile with media query 25-Jan-2021 *********\/\r\n@media(max-width:770px){\r\n\t.camera_caption > div {\r\n\t\tpadding: 5px 10px!important;\r\n\t}\r\n\r\n\t.camera_caption p {\r\n\t\tmargin: 0 0 5px;\r\n\t}\r\n\r\n\t.sf-4-slide-title {\r\n\tcolor: #FFF;\r\n\tfont-size: 17px;\r\n\t}\r\n\r\n\t.sf-4-slide-desc {\r\n\t\tcolor: #FFF;\r\n\t\tfont-size: 13px;\r\n\t}\r\n}\r\n@media(max-width:580px){\r\n\t.camera_caption > div {\r\n\t\tpadding: 0px 4px !important;\r\n\r\n\t}\r\n\r\n\t.camera_caption p {\r\n\t\tmargin: 0px;\r\n\r\n\t}\r\n\r\n\t.sf-4-slide-title {\r\n\t\tcolor: #FFF;\r\n\t\tfont-size: 12px;\r\n\t\tline-height:2.5;\r\n\t}\r\n\r\n\t.sf-4-slide-desc {\r\n\t\tcolor: #FFF;\r\n\t\tfont-size: 9px;\r\n\t\tline-height:2.5;\r\n\t}\r\n}\r\n\/********* hide slide content on mobile with media query 25-Jan-2021 *********\/\r\n\r\n\r\n.camera_thumb {\r\n\twidth: 100px;\r\n\theight: 100px;\r\n}\r\n\r\n<\/style>\r\n\n<p>&nbsp;<\/p>\n<h3 style=\"text-align: center;\">Example 2 By Layout 12<\/h3>\n<p>&nbsp;<\/p>\n<p>\r\n<style>\r\n.sf-12-main-132{\r\n\twidth: 100%; \/* width *\/.\r\n\theight: auto;\r\n}\r\n\r\n.sf-12-main-132 img {\r\n\twidth : 100%;\r\n\t\theight : auto;\r\n\t}\r\n\r\n.sf-12-main-132 .twentytwenty-overlay:hover {\r\n\t\tbackground: rgba(0, 0, 0, 0);  \/* overlay off *\/.\r\n\t}\r\n\r\n.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n}\r\n\r\n#section { background-image: url(https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/07\/double-bubble-outline.png); }<\/style>\r\n\r\n<div class=\"sf-12-main-132\">\r\n\t<div class=\"sf-12-container-132\" class=\"twentytwenty-container\">\r\n\t\t\t\t\t\t\t<!-- The before image is first in first loop -->.\r\n\t\t\t\t\t<img decoding=\"async\" alt=\"\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/07\/Riddle-1_Q.jpg\" \/>\r\n\t\t\t\t\t<!-- The after image is last in second loop -->.\r\n\t\t\t\t\t\t\t\t\t<!-- The before image is first in first loop -->.\r\n\t\t\t\t\t<img decoding=\"async\" alt=\"\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/07\/Riddle-1.jpg\" \/>\r\n\t\t\t\t\t<!-- The after image is last in second loop -->.\r\n\t\t\t\t\t<\/div>\r\n<\/div>\r\n\r\n\r\n<script type=\"text\/javascript\">\r\n\r\njQuery(document).ready(function() {\t\r\n\tjQuery(\".sf-12-container-132\").imagesLoaded().done( function() {\r\n\t\tjQuery(\".sf-12-container-132\").twentytwenty({\r\n\t\t\tdefault_offset_pct: 0.95, \t\t\/\/ How much of the before image is visible when the page loads\t\t\t\t\t\t\t\t\tdefault_offset_pct: 0.5,\r\n\t\t\torientation: 'horizontal', \t\t\t\t\t\/\/ Orientation of the before and after images ('horizontal' or 'vertical') \t\t\t\t\t\torientation: 'horizontal',\r\n\t\t\tbefore_label: 'Question', \t\t\t\t\t\/\/ Set a custom before label    \/\/label on\/off  \t\t\t\t\t\t\t\t\t\t\t\tbefore_label: 'Before',\r\n\t\t\tafter_label: 'Answer', \t\t\t\t\t\/\/ Set a custom after label  \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tafter_label: 'After',\r\n\t\t\t\/\/no_overlay: true, \t\t\t\t\t\t\t\t\t\t\t\t\/\/Do not show the overlay with before and after  \t\t\t\t\t\t\t\t\t\t\t\tno_overlay: false,\r\n\t\t\tmove_slider_on_hover: false, \t\/\/ Move slider on mouse hover? \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tmove_slider_on_hover: false,\r\n\t\t\tmove_with_handle_only: false, \t\/\/ Allow a user to swipe anywhere on the image to control slider movement. \t\t\t\t\t\tmove_with_handle_only: true,\r\n\t\t\tclick_to_move: false \t\t\t\t\t\/\/ Allow a user to click (or tap) anywhere on the image to move the slider to that location.\tclick_to_move: false\r\n\t\t});\r\n\t});\r\n});\r\n<\/script>\r\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text] Example 1\u00a0 By Layout 4\u00a0 &nbsp; &nbsp; Example 2 By Layout 12 &nbsp; [\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":56,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-632","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/632","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=632"}],"version-history":[{"count":4,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/632\/revisions"}],"predecessor-version":[{"id":3825,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/632\/revisions\/3825"}],"wp:attachment":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/media?parent=632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}