{"id":597,"date":"2021-01-27T13:26:08","date_gmt":"2021-01-27T13:26:08","guid":{"rendered":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/?page_id=597"},"modified":"2021-03-16T08:38:29","modified_gmt":"2021-03-16T08:38:29","slug":"health-awareness","status":"publish","type":"page","link":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/health-awareness\/","title":{"rendered":"Health Awareness\u200b"},"content":{"rendered":"<p>[vc_row][vc_column][vc_column_text]<\/p>\n<h4 style=\"text-align: center;\"><strong>Slider By Layout 5<\/strong><\/h4>\n<p>&nbsp;<\/p>\n<style>\r\n.slider-container-56 img {\r\n\twidth : 720px;\r\n\theight : 480px;\r\n}\r\n\r\n\/********* FIX FOR VERTICAL SCROLL BAR 19-JAN-2021 *********\/\r\n.flipster {\r\n\tdisplay: block;\r\n\t\/* overflow-x: hidden; *\/\r\n\t\/* overflow-x: inherit;\r\n\toverflow-y: visible; *\/\r\n\r\n\toverflow: hidden !important;\r\n\r\n\tposition: relative;\r\n}\r\n\r\n\r\n\/********* FIX FOR small screen media query 25-JAN-2021 *********\/\r\n@media only screen and (max-width: 768px) {\r\n\t.slider-container-56 img {\r\n\t\twidth : 300px;\r\n\t}\r\n}\r\n@media only screen and (max-width: 540px) {\r\n\t.slider-container-56 img {\r\n\t\twidth : 170px;\r\n\t}\r\n}\r\n.sf-5-descdiv-56 {\r\ntext-align:center;\r\nposition: absolute;\r\nopacity:0;\r\nbottom: 12%;\r\ncolor: #fff;\r\n\/\/padding:1%;\r\nbackground: rgba(0,0,0,0.5);\r\nwidth: 60%;\r\nleft: 20%;\r\ntransition: all 1s 0.2s ease;\r\nbox-sizing: border-box;\r\n\/\/visibility: hidden;\r\n}\r\n.sf-5-descdiv-56 .sf-5-desc-56 {\r\n\tmargin-top: 0.5%;\r\n\tmargin-bottom: 0.5%;\r\n}\r\n.flipster__item__content:hover .sf-5-descdiv-56 {\r\n\topacity:1;\r\n}\r\n\r\n.sf-5-slide-button-2-56 {\r\nmin-width: 80px;\r\n\tmin-height: 30px;\r\n\t\/\/float: left;\r\n\tmargin: 10px;\r\n\t-webkit-border-radius: 3px;\r\n\t-moz-border-radius: 3px;\r\n\tborder-radius: 3px;\r\n\tborder: none;\r\n\tcolor: #fff;\r\n\tbackground-color: #4e4441;\r\n\tcursor: pointer;\r\n}\r\n\r\n.sf-5-slide-button-2-56:hover {\r\n\tbackground-color: white;\r\n\tcolor: black;\r\n}\r\n\r\n\r\n<\/style>\r\n\r\n<div class=\"slider-container-56\">\r\n\t<ul class=\"flip-items\">\r\n\r\n\t\t\t\t<li data-flip-title=\"\" data-flip-category=\"\">\r\n\t\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/Royal-family-promotes-mental-health-awareness.jpg\">\r\n\t\t\t<div class=\"sf-5-descdiv-http:\/\/56\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/li>\r\n\t\t\t\t\t\t<li data-flip-title=\"MHAW-Kindness-Facebook-Header-scaled\" data-flip-category=\"\">\r\n\t\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/MHAW-Kindness-Facebook-Header-scaled-1.jpg\">\r\n\t\t\t<div class=\"sf-5-descdiv-http:\/\/56\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-5-title-56\">\r\n\t\t\t\t\t\t\t\tMHAW-Kindness-Facebook-Header-scaled\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/li>\r\n\t\t\t\t\t\t<li data-flip-title=\"\" data-flip-category=\"\">\r\n\t\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/Health-Awareness\u200b-Custom.jpg\">\r\n\t\t\t<div class=\"sf-5-descdiv-http:\/\/56\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/li>\r\n\t\t\t\t\t\t<li data-flip-title=\"\" data-flip-category=\"\">\r\n\t\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/cervical-cancer-awareness-Custom.jpg\">\r\n\t\t\t<div class=\"sf-5-descdiv-http:\/\/56\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/li>\r\n\t\t\t\t\t\t<li data-flip-title=\"\" data-flip-category=\"\">\r\n\t\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/blog_teaser-Custom.jpg\">\r\n\t\t\t<div class=\"sf-5-descdiv-http:\/\/56\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/li>\r\n\t\t\t\t\t\t<li data-flip-title=\"\" data-flip-category=\"\">\r\n\t\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/banner-covid-Custom.jpg\">\r\n\t\t\t<div class=\"sf-5-descdiv-http:\/\/56\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/li>\r\n\t\t\t\t<\/ul>\r\n<\/div>\r\n\r\n<script>\r\njQuery( document ).ready(function() {\r\n\tjQuery(\".slider-container-56\").flipster({\r\n\r\n\t\titemContainer: 'ul',\r\n\t\t\/\/ [string|object].\r\n\t\t\/\/ Selector for the container of the flippin' items.\r\n\r\n\t\titemSelector: 'li',\r\n\t\t\/\/ [string|object]\r\n\t\t\/\/ Selector for children of `itemContainer` to flip.\r\n\r\n\t\tstart: 'center', \/\/future.\r\n\t\t\/\/ ['center'|number].\r\n\t\t\/\/ Zero based index of the starting item, or use 'center' to start in the middle.\r\n\r\n\t\tfadeIn: 400,\r\n\t\t\/\/ [milliseconds].\r\n\t\t\/\/ Speed of the fade in animation after items have been setup.\r\n\r\n\t\tloop: true,\r\n\t\t\/\/ [true|false].\r\n\t\t\/\/ Loop around when the start or end is reached.\r\n\r\n\t\t\t\t\/\/ [false|milliseconds].\r\n\t\t\/\/ If a positive number, Flipster will automatically advance to next item after that number of milliseconds.\r\n\r\n\t\tpauseOnHover: true,\r\n\t\t\/\/ [true|false].\r\n\t\t\/\/ If true, autoplay advancement will pause when Flipster is hovered.\r\n\r\n\r\n\t\t\/\/** Start of preset 1 **\/\/\r\n\t\t\t\t\/\/** End of preset 1 **\/\/.\r\n\r\n\r\n\t\t\/\/** Start of preset 2 **\/\/\r\n\t\t\t\t\/\/** End of preset 2 **\/\/.\r\n\r\n\r\n\t\t\/\/** Start of preset 3 **\/\/\r\n\t\t\t\t\/\/** End of preset 3 **\/\/\r\n\r\n\r\n\t\t\/\/** Start of preset 4 **\/\/\r\n\t\t\t\tstyle: 'flat',\r\n\t\t\/\/ [coverflow|carousel|flat|wheel]\r\n\t\t\/\/ Adds a class (e.g. flipster--coverflow) to the flipster element to switch between display styles\r\n\t\t\/\/ Create your own theme in CSS and use this setting to have Flipster add the custom class\r\n\r\n\t\tspacing: -0.25,\r\n\t\t\/\/ [number]\r\n\t\t\/\/ Space between items relative to each item's width. 0 for no spacing, negative values to overlap (default -0.6)\r\n\t\t\t\t\/\/** End of preset 4 **\/\/\r\n\r\n\t\tclick: true,\r\n\t\t\/\/ [true|false]\r\n\t\t\/\/ Clicking an item switches to that item\r\n\r\n\t\tkeyboard: true,\r\n\t\t\/\/ [true|false]\r\n\t\t\/\/ Enable left\/right arrow navigation\r\n\r\n\t\tscrollwheel: true,\r\n\t\t\/\/ [true|false]\r\n\t\t\/\/ Enable mousewheel\/trackpad navigation; up\/left = previous, down\/right = next\r\n\r\n\t\ttouch: true,\r\n\t\t\/\/ [true|false]\r\n\t\t\/\/ Enable swipe navigation for touch devices\r\n\r\n\r\n\t\t\t\tnav: false,\r\n\t\t\/\/ [true|false|'before'|'after']\r\n\t\t\/\/ If not false, Flipster will build an unordered list of the items\r\n\t\t\/\/ Values true or 'before' will insert the navigation before the items, 'after' will append the navigation after the items\r\n\t\t\r\n\t\t\t\t\r\n\r\n\t\t\r\n\t\tbuttons: true,\r\n\t\t\/\/ [true|false|'custom']\r\n\t\t\/\/ If true, Flipster will insert Previous \/ Next buttons with SVG arrows\r\n\t\t\/\/ If 'custom', Flipster will not insert the arrows and will instead use the values of `buttonPrev` and `buttonNext`\r\n\r\n\t});\r\n});\r\n<\/script>\r\n\n\n\n<div class=\"wp-block-spacer\" style=\"height: 100px;\" aria-hidden=\"true\">\u00a0<\/div>\n\n<h5 style=\"text-align: center;\"><strong>This slider is made by layout 5<\/strong><\/h5>\n<p><strong>Settings Used :<\/strong> Design Preset \u2013 Wheel, Auto-Play \u2013 OFF, Pause On Mouse Hover \u2013 ON, Loop \u2013 ON, Fade In speed \u2013 400ms, Click \u2013 ON, Keyboard Arrow keys \u2013 ON, Scrool Wheel \u2013 ON , Touch \u2013 ON, Navigation \u2013 OFF , Prev\/Next Buttons \u2013 ON.<\/p>\n<p>[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column][vc_column_text] This slider is made by layout 5 Settings Used : Design Preset \u2013 Wheel, Auto-Play \u2013 OFF, Pause On Mouse Hover \u2013 ON, Loop \u2013 ON, Fade In speed \u2013 400ms, Click \u2013 ON, Keyboard Arrow keys \u2013 ON, Scrool Wheel \u2013 ON , Touch \u2013 ON, Navigation \u2013 OFF , Prev\/Next Buttons \u2013 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":63,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-597","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/597","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=597"}],"version-history":[{"count":4,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/597\/revisions"}],"predecessor-version":[{"id":2867,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/597\/revisions\/2867"}],"wp:attachment":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/media?parent=597"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}