{"id":1073,"date":"2021-01-28T07:43:14","date_gmt":"2021-01-28T07:43:14","guid":{"rendered":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/?page_id=1073"},"modified":"2021-03-16T07:36:37","modified_gmt":"2021-03-16T07:36:37","slug":"happy-birthday-slider","status":"publish","type":"page","link":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/happy-birthday-slider\/","title":{"rendered":"Happy Birthday Slider"},"content":{"rendered":"<p>[vc_row][vc_column][vc_column_text]<\/p>\n<h4 style=\"text-align: center;\"><strong><span style=\"color: #999999;\">Slider By Layout 5\u00a0<\/span><\/strong><\/h4>\n<p>&nbsp;<\/p>\n<style>\r\n.slider-container-29 img {\r\n\twidth : 600px;\r\n\theight : 400px;\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-29 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-29 img {\r\n\t\twidth : 170px;\r\n\t}\r\n}\r\n.sf-5-descdiv-29 {\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-29 .sf-5-desc-29 {\r\n\tmargin-top: 0.5%;\r\n\tmargin-bottom: 0.5%;\r\n}\r\n.flipster__item__content:hover .sf-5-descdiv-29 {\r\n\topacity:1;\r\n}\r\n\r\n.sf-5-slide-button-2-29 {\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-29:hover {\r\n\tbackground-color: white;\r\n\tcolor: black;\r\n}\r\n\r\n .slider-container-29 .flipster__nav__link::after { background : #ef4f4f; } \r\n<\/style>\r\n\r\n<div class=\"slider-container-29\">\r\n\t<ul class=\"flip-items\">\r\n\r\n\t\t\t\t<li data-flip-title=\"Birthday\" 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\/01\/Birthday-1.jpeg\">\r\n\t\t\t<div class=\"sf-5-descdiv-http:\/\/29\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-5-title-29\">\r\n\t\t\t\t\t\t\t\tBirthday\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=\"Birthday Party\" 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\/01\/bithday.jpg\">\r\n\t\t\t<div class=\"sf-5-descdiv-http:\/\/29\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-5-title-29\">\r\n\t\t\t\t\t\t\t\tBirthday Party\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=\"Happy Birthday Card\" 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\/01\/Happy-Birthday-Card.jpeg\">\r\n\t\t\t<div class=\"sf-5-descdiv-http:\/\/29\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-5-title-29\">\r\n\t\t\t\t\t\t\t\tHappy Birthday Card\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=\"Happy Birthday GIfts\" 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\/01\/Happy-Birthday-GIfts.png\">\r\n\t\t\t<div class=\"sf-5-descdiv-http:\/\/29\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-5-title-29\">\r\n\t\t\t\t\t\t\t\tHappy Birthday GIfts\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=\"Happy Birthday\" 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\/01\/happy-bithday.jpg\">\r\n\t\t\t<div class=\"sf-5-descdiv-http:\/\/29\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-5-title-29\">\r\n\t\t\t\t\t\t\t\tHappy Birthday\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<\/ul>\r\n<\/div>\r\n\r\n<script>\r\njQuery( document ).ready(function() {\r\n\tjQuery(\".slider-container-29\").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\tautoplay: 1500,\t\t\t\t\t\t\t\/\/ true\/false - numbers in milliseconds.\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\tstyle: 'coverflow',\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.6,\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 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\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\r\n\t\t\t\t\r\n\r\n\t\t\t\tnav: 'after',\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\tbuttons: false,\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<p>&nbsp;<\/p>\n<h5 style=\"text-align: center;\"><strong>This slider is made by layout 5<\/strong><\/h5>\n<p><strong>Settings Used :<\/strong>\u00a0Design Preset \u2013 Covorflow, Auto-Play \u2013 OFF, \u00a0Auto-Play \u2013 ON, Auto Play Speed \u2013 1500ms, Pause On Mouse Hover \u2013 ON, Loop \u2013 OFF, Fade In speed \u2013 400ms, Click \u2013 ON, Keyboard Arrow keys \u2013 ON, Scrool Wheel \u2013 ON , Touch \u2013 ON, Navigation \u2013 After Slider, Prev\/Next Buttons \u2013 OFF with Custom CSS.<\/p>\n\n<p>&nbsp;<\/p>\n<p>[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column][vc_column_text] Slider By Layout 5\u00a0 &nbsp; &nbsp; This slider is made by layout 5 Settings Used :\u00a0Design Preset \u2013 Covorflow, Auto-Play \u2013 OFF, \u00a0Auto-Play \u2013 ON, Auto Play Speed \u2013 1500ms, Pause On Mouse Hover \u2013 ON, Loop \u2013 OFF, Fade In speed \u2013 400ms, Click \u2013 ON, Keyboard Arrow keys \u2013 ON, Scrool Wheel [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":28,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1073","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/1073","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=1073"}],"version-history":[{"count":6,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/1073\/revisions"}],"predecessor-version":[{"id":2835,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/1073\/revisions\/2835"}],"wp:attachment":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/media?parent=1073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}