{"id":1484,"date":"2021-01-30T09:57:57","date_gmt":"2021-01-30T09:57:57","guid":{"rendered":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/?page_id=1484"},"modified":"2021-03-16T07:48:02","modified_gmt":"2021-03-16T07:48:02","slug":"personal-page-slider","status":"publish","type":"page","link":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/personal-page-slider\/","title":{"rendered":"Personal Web Page"},"content":{"rendered":"<p>[vc_section full_width=&#8221;stretch_row_content&#8221; content_placement=&#8221;bottom&#8221; css=&#8221;.vc_custom_1612009517118{padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 0px !important;padding-left: 0px !important;background-color: #ffdf68 !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}&#8221;][vc_row][vc_column width=&#8221;1\/2&#8243; css=&#8221;.vc_custom_1612185553885{margin-top: 0px !important;margin-right: 0px !important;margin-bottom: 0px !important;margin-left: 0px !important;padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 0px !important;padding-left: 0px !important;}&#8221;][vc_single_image image=&#8221;1530&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221; css=&#8221;.vc_custom_1612184292702{margin-bottom: 0px !important;padding-top: 5% !important;padding-right: 0px !important;padding-bottom: 0px !important;padding-left: 0px !important;}&#8221;][\/vc_column][vc_column width=&#8221;1\/2&#8243;][vc_column_text css=&#8221;.vc_custom_1615880549552{padding-top: 15% !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}&#8221;]&nbsp;<\/p>\n<p><style>\r\n.slider-container-46 img {\r\n\twidth : 400px;\r\n\theight : 350px;\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-46 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-46 img {\r\n\t\twidth : 170px;\r\n\t}\r\n}\r\n.sf-5-descdiv-46 {\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-46 .sf-5-desc-46 {\r\n\tmargin-top: 0.5%;\r\n\tmargin-bottom: 0.5%;\r\n}\r\n.flipster__item__content:hover .sf-5-descdiv-46 {\r\n\topacity:1;\r\n}\r\n\r\n.sf-5-slide-button-2-46 {\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-46:hover {\r\n\tbackground-color: white;\r\n\tcolor: black;\r\n}\r\n\r\n.slider-container-46 ul .flipster__nav__child { font-style : bold;  background :#D52525;  } .slider-container-46 .flipster__nav__link::after { background : #D52525;  } .slider-container-46 .flipster__item img {  margin-top: 10%; } \r\n<\/style>\r\n\r\n<div class=\"slider-container-46\">\r\n\t<ul class=\"flip-items\">\r\n\r\n\t\t\t\t<li data-flip-title=\"About\" 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\/About-me.jpg\">\r\n\t\t\t<div class=\"sf-5-descdiv-http:\/\/46\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-5-title-46\">\r\n\t\t\t\t\t\t\t\tAbout\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=\"Portfolio\">\r\n\t\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/portfolio-4.jpg\">\r\n\t\t\t<div class=\"sf-5-descdiv-http:\/\/46\">\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=\"Portfolio\">\r\n\t\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/portfolio-3.jpg\">\r\n\t\t\t<div class=\"sf-5-descdiv-http:\/\/46\">\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=\"Portfolio\">\r\n\t\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/portfolio-2.jpg\">\r\n\t\t\t<div class=\"sf-5-descdiv-http:\/\/46\">\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=\"Portfolio\">\r\n\t\t\t<img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/02\/portfolio-1.jpg\">\r\n\t\t\t<div class=\"sf-5-descdiv-http:\/\/46\">\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=\"Contact\" 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\/contact.jpg\">\r\n\t\t\t<div class=\"sf-5-descdiv-http:\/\/46\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-5-title-46\">\r\n\t\t\t\t\t\t\t\tContact\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-46\").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: false,\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: false,\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\tnav: 'before',\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\t\t\r\n\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[\/vc_column_text][\/vc_column][\/vc_row][\/vc_section][vc_row][vc_column][vc_column_text]&nbsp;<\/p>\n<h5><\/h5>\n<h5 style=\"text-align: center;\"><span style=\"color: #000000;\"><strong>This Slider is made by Layout 5<\/strong><\/span><\/h5>\n<p>&nbsp;<\/p>\n<p><strong>Settings Used :<\/strong> Design preset \u2013 Coverflow, Auto Play \u2013 OFF, Pause On Mouse Hover \u2013 OFF, Loop \u2013 OFF, Fade In Speed \u2013 400 milliseconds , Click \u2013 ON, Keyboard Arrow Keys \u2013 ON, Scrool Wheel \u2013 On, Touch \u2013 On, Navigation- Before Slider with Custom CSS<\/p>\n<p>&nbsp;<\/p>\n<div class=\"wp-block-spacer\" aria-hidden=\"true\"><\/div>\n<p>[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_section full_width=&#8221;stretch_row_content&#8221; content_placement=&#8221;bottom&#8221; css=&#8221;.vc_custom_1612009517118{padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 0px !important;padding-left: 0px !important;background-color: #ffdf68 !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}&#8221;][vc_row][vc_column width=&#8221;1\/2&#8243; css=&#8221;.vc_custom_1612185553885{margin-top: 0px !important;margin-right: 0px !important;margin-bottom: 0px !important;margin-left: 0px !important;padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 0px !important;padding-left: 0px !important;}&#8221;][vc_single_image image=&#8221;1530&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221; css=&#8221;.vc_custom_1612184292702{margin-bottom: 0px !important;padding-top: 5% !important;padding-right: 0px !important;padding-bottom: 0px !important;padding-left: 0px !important;}&#8221;][\/vc_column][vc_column width=&#8221;1\/2&#8243;][vc_column_text css=&#8221;.vc_custom_1615880549552{padding-top: 15% [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":24,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1484","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/1484","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=1484"}],"version-history":[{"count":23,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/1484\/revisions"}],"predecessor-version":[{"id":2839,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/1484\/revisions\/2839"}],"wp:attachment":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/media?parent=1484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}