{"id":861,"date":"2021-02-05T12:07:35","date_gmt":"2021-02-05T12:07:35","guid":{"rendered":"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/?page_id=861"},"modified":"2021-02-05T12:35:58","modified_gmt":"2021-02-05T12:35:58","slug":"layout-3","status":"publish","type":"page","link":"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/layout-3\/","title":{"rendered":"Layout 3"},"content":{"rendered":"<p>[vc_row][vc_column][vc_column_text]<\/p>\n<h4 style=\"text-align: center;\"><strong>A Basic Example<\/strong><\/h4>\n<p>[\/vc_column_text][\/vc_column][vc_column][vc_empty_space height=&#8221;30px&#8221;][\/vc_column][vc_column][vc_column_text]<script>\njQuery( document ).ready(function() {\n\tjQuery('.first-sample-6 .slider').blue_slider({\n\t\t\/\/ Preset 4 for Free edition\n\t\tslide_template: '1fr 6fr (2,1fr) .5fr',\n\t\tcurrent_fr_index: 2,\n\t\tstart_slide_index: 0, \n\t\tcurrent_fr_index_flow: false,\n\n\t\tauto_play: false,\t\t\t\t\t\t\/\/ to auto play slides (default: false)\n\t\tauto_play_period: 3500,\t\t\t\/\/ auto play speed time (default: 3000) 3sec\n\t\tspeed: 2500,\t\t\t\t\t\/\/ slide transition time (default: 1000) 1 Sec\n\n\t\tslide_gap: 10,\t\t\t\t\t\t\/\/ gap between 2 slides (default: 0)\n\n\t\tcurrent_fr_class: 'my-fr-current',\t\t\t\t\t\t\t\t\/\/ highlighting the current frame\n\t\tactive_fr_class: 'my-fr-active',\n\t\tsencitive_drag: 100,\n\t\tloop: false,\n\t\tarrows: true,\n\t\tprev_arrow: '.first-sample-6 .prev-slide',\n\t\tnext_arrow: '.first-sample-6 .next-slide',\n\t});\n});\n<\/script>\n\n<!-- slider start-->\n<div class=\"sf-3-6\">\n\t<div class=\"first-sample-6\">\n\t\t<div class=\"slider\">\n\t\t\t\t\t\t<div class=\"item\">\n\t\t\t\t\t<img class=\"sf-3-slide-image\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/01\/Picture-13.jpg\" alt=\"\" loading=\"lazy\" decoding=\"async\">\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"item\">\n\t\t\t\t\t<img class=\"sf-3-slide-image\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/01\/Picture-12.jpg\" alt=\"\" loading=\"lazy\" decoding=\"async\">\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"item\">\n\t\t\t\t\t<img class=\"sf-3-slide-image\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/01\/Picture-11.jpg\" alt=\"\" loading=\"lazy\" decoding=\"async\">\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"item\">\n\t\t\t\t\t<img class=\"sf-3-slide-image\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/01\/Picture-9.jpg\" alt=\"\" loading=\"lazy\" decoding=\"async\">\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"item\">\n\t\t\t\t\t<img class=\"sf-3-slide-image\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/01\/Picture-8.jpg\" alt=\"\" loading=\"lazy\" decoding=\"async\">\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"item\">\n\t\t\t\t\t<img class=\"sf-3-slide-image\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/01\/Picture-7.jpg\" alt=\"\" loading=\"lazy\" decoding=\"async\">\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t<\/div>\n\t\t\t\t<i class=\"prev-slide \"><i class=\"fa fa-chevron-left\"><\/i><\/i>\n\t\t<i class=\"next-slide \"><i class=\"fa fa-chevron-right\"><\/i><\/i>\n\t\t\n\t<\/div>\n<\/div>\n<!-- slider end-->\n\n<style>\n.sf-3-6 {\n\tmargin-left: auto;\n\tmargin-right: auto;\n\twidth: 100%;\n\theight: 450px;\n}\n\n.sf-3-6 .sf-3-slide-content {\n\tposition: absolute;\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n\tbackground: linear-gradient(to top, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.4) 70%, transparent 100%);\n\tcolor: #ffffff;\n\tpadding: 16px;\n\tz-index: 5;\n\tpointer-events: none;\n\tbox-sizing: border-box;\n}\n\n.sf-3-6 .sf-3-slide-title {\n\tfont-size: 14px;\n\tfont-weight: 700;\n\tcolor: #ffffff;\n\tline-height: 1.3;\n\ttext-shadow: 0 1px 3px rgba(0,0,0,0.5);\n\tmargin-bottom: 22px;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n}\n\n.sf-3-6 .sf-3-slide-desc {\n\tfont-size: 12px;\n\tcolor: rgba(255,255,255,0.85);\n\tline-height: 1.4;\n\ttext-shadow: 0 1px 2px rgba(0,0,0,0.5);\n\tposition: absolute;\n\tbottom: 14px;\n\tleft: 16px;\n\tright: 16px;\n\topacity: 0;\n\tvisibility: hidden;\n\tpointer-events: none;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\ttransition: opacity 0.15s ease 0s, visibility 0s 0.15s;\n}\n\n.first-sample-6 .slider .slide-item.my-fr-current .sf-3-slide-desc {\n\topacity: 1;\n\tvisibility: visible;\n\tpointer-events: auto;\n\ttransition: opacity 0.5s ease 2.2s, visibility 0s 2.2s;\n}\n\n\/* main CSS start *\/\n.first-sample-6 {\n\twidth: 100%;\t\t\t\t\/* width of slider *\/\n\theight: 100%;\t\t\t\t\/* height of slider *\/\n\tborder: none;\n\tborder-radius: 0;\n\tposition: relative;\n\tbackground-color: #1c1c1c;\t\/* background color of slider *\/\n}\n\n.first-sample-6 .slider {\n\theight: 100%;\n}\n\n.first-sample-6 .slider .slide-wrapper {\n\toverflow: hidden;\n\theight: 100%;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n}\n\n.first-sample-6 .slider .slide-tracker {\n\theight: 100%;\n}\n\n.first-sample-6 .slider .slide-item {\n\theight: 100%;\n}\n\n.first-sample-6 .slider .slide-tracker .my-fr-current .item::before {\n\tbackground-color: rgba(0, 0, 0, 0);\n}\n\n.first-sample-6 .slider .item {\n\twidth: 100%;\n\theight: 100%;\n\toverflow: hidden;\n\tposition: relative;\n}\n\n.first-sample-6 .slider .item::before {\n\tcontent: '';\n\tposition: absolute;\n\tleft: 0;\n\ttop: 0;\n\twidth: 100%;\n\theight: 100%;\n\tbackground-color: rgba(0, 0, 0, 0.8);\n\ttransition: background-color 1s;\n}\n\n.first-sample-6 .slider .item img {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\t\t\t\t\/* image fit or Zoom 100% *\/\n\tobject-position: center center;\n}\n\n.first-sample-6 .prev-slide,\n.first-sample-6 .next-slide {\n\tposition: absolute;\n\ttop: 50%;\n\ttransform: translateY(-50%);\n\twidth: 44px;\n\theight: 44px;\n\tbackground: rgba(0, 0, 0, 0.45);\n\tcolor: #ffffff;\n\tborder-radius: 50%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-size: 14px;\n\tcursor: pointer;\n\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n\tz-index: 10;\n\tborder: 1px solid rgba(255, 255, 255, 0.15);\n\tbackdrop-filter: blur(4px);\n\t-webkit-backdrop-filter: blur(4px);\n}\n\n.first-sample-6 .prev-slide:hover,\n.first-sample-6 .next-slide:hover {\n\tbackground: rgba(0, 0, 0, 0.75);\n\tcolor: #ffffff;\n\ttransform: translateY(-50%) scale(1.08);\n\tbox-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);\n}\n\n\/* position of previous button from slider container (default -70 px) *\/\n.first-sample-6 .prev-slide {\n\tleft: 20px;\n}\n\n\/* position of next button from slider container (default -70 px) *\/\n.first-sample-6 .next-slide {\n\tright: 20px;\n}\n\/* main CSS end *\/\n\n\/* media query CSS start *\/\n@media only screen and (max-width: 600px) {\n\t.sf-3-6 {\n\t\theight: calc(450px \/ 2);\n\t}\n}\n\/* media query CSS end *\/\n<\/style>\n[\/vc_column_text][vc_empty_space height=&#8221;100px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h4 style=\"text-align: center;\"><strong>Autoplay Slide Show<\/strong><\/h4>\n<p>[\/vc_column_text][\/vc_column][vc_column][vc_empty_space height=&#8221;30px&#8221;][\/vc_column][vc_column][vc_column_text]<script>\njQuery( document ).ready(function() {\n\tjQuery('.first-sample-7 .slider').blue_slider({\n\t\t\/\/ Preset 4 for Free edition\n\t\tslide_template: '1fr 6fr (2,1fr) .5fr',\n\t\tcurrent_fr_index: 2,\n\t\tstart_slide_index: 0, \n\t\tcurrent_fr_index_flow: false,\n\n\t\tauto_play: true,\t\t\t\t\t\t\/\/ to auto play slides (default: false)\n\t\tauto_play_period: 3500,\t\t\t\/\/ auto play speed time (default: 3000) 3sec\n\t\tspeed: 2500,\t\t\t\t\t\/\/ slide transition time (default: 1000) 1 Sec\n\n\t\tslide_gap: 10,\t\t\t\t\t\t\/\/ gap between 2 slides (default: 0)\n\n\t\tcurrent_fr_class: 'my-fr-current',\t\t\t\t\t\t\t\t\/\/ highlighting the current frame\n\t\tactive_fr_class: 'my-fr-active',\n\t\tsencitive_drag: 100,\n\t\tloop: false,\n\t\tarrows: true,\n\t\tprev_arrow: '.first-sample-7 .prev-slide',\n\t\tnext_arrow: '.first-sample-7 .next-slide',\n\t});\n});\n<\/script>\n\n<!-- slider start-->\n<div class=\"sf-3-7\">\n\t<div class=\"first-sample-7\">\n\t\t<div class=\"slider\">\n\t\t\t\t\t\t<div class=\"item\">\n\t\t\t\t\t<img class=\"sf-3-slide-image\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/01\/Game-10.jpg\" alt=\"\" loading=\"lazy\" decoding=\"async\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"sf-3-slide-content\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-3-slide-title\">Last day of June<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"item\">\n\t\t\t\t\t<img class=\"sf-3-slide-image\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/01\/Game-11.jpg\" alt=\"\" loading=\"lazy\" decoding=\"async\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"sf-3-slide-content\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-3-slide-title\">Call of Duty<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"item\">\n\t\t\t\t\t<img class=\"sf-3-slide-image\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/01\/Game-1.jpg\" alt=\"\" loading=\"lazy\" decoding=\"async\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"sf-3-slide-content\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-3-slide-title\">Cartoon<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"item\">\n\t\t\t\t\t<img class=\"sf-3-slide-image\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/01\/Game-2.jpg\" alt=\"\" loading=\"lazy\" decoding=\"async\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"sf-3-slide-content\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-3-slide-title\">StarPoint Gemini Warlords<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"item\">\n\t\t\t\t\t<img class=\"sf-3-slide-image\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/01\/Game-6.jpg\" alt=\"\" loading=\"lazy\" decoding=\"async\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"sf-3-slide-content\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-3-slide-title\">Deadpool<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t<\/div>\n\t\t\t\t<i class=\"prev-slide \"><i class=\"fa fa-chevron-left\"><\/i><\/i>\n\t\t<i class=\"next-slide \"><i class=\"fa fa-chevron-right\"><\/i><\/i>\n\t\t\n\t<\/div>\n<\/div>\n<!-- slider end-->\n\n<style>\n.sf-3-7 {\n\tmargin-left: auto;\n\tmargin-right: auto;\n\twidth: 100%;\n\theight: 750px;\n}\n\n.sf-3-7 .sf-3-slide-content {\n\tposition: absolute;\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n\tbackground: linear-gradient(to top, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.4) 70%, transparent 100%);\n\tcolor: #ffffff;\n\tpadding: 16px;\n\tz-index: 5;\n\tpointer-events: none;\n\tbox-sizing: border-box;\n}\n\n.sf-3-7 .sf-3-slide-title {\n\tfont-size: 14px;\n\tfont-weight: 700;\n\tcolor: #ffffff;\n\tline-height: 1.3;\n\ttext-shadow: 0 1px 3px rgba(0,0,0,0.5);\n\tmargin-bottom: 22px;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n}\n\n.sf-3-7 .sf-3-slide-desc {\n\tfont-size: 12px;\n\tcolor: rgba(255,255,255,0.85);\n\tline-height: 1.4;\n\ttext-shadow: 0 1px 2px rgba(0,0,0,0.5);\n\tposition: absolute;\n\tbottom: 14px;\n\tleft: 16px;\n\tright: 16px;\n\topacity: 0;\n\tvisibility: hidden;\n\tpointer-events: none;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\ttransition: opacity 0.15s ease 0s, visibility 0s 0.15s;\n}\n\n.first-sample-7 .slider .slide-item.my-fr-current .sf-3-slide-desc {\n\topacity: 1;\n\tvisibility: visible;\n\tpointer-events: auto;\n\ttransition: opacity 0.5s ease 2.2s, visibility 0s 2.2s;\n}\n\n\/* main CSS start *\/\n.first-sample-7 {\n\twidth: 100%;\t\t\t\t\/* width of slider *\/\n\theight: 100%;\t\t\t\t\/* height of slider *\/\n\tborder: none;\n\tborder-radius: 0;\n\tposition: relative;\n\tbackground-color: #1c1c1c;\t\/* background color of slider *\/\n}\n\n.first-sample-7 .slider {\n\theight: 100%;\n}\n\n.first-sample-7 .slider .slide-wrapper {\n\toverflow: hidden;\n\theight: 100%;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n}\n\n.first-sample-7 .slider .slide-tracker {\n\theight: 100%;\n}\n\n.first-sample-7 .slider .slide-item {\n\theight: 100%;\n}\n\n.first-sample-7 .slider .slide-tracker .my-fr-current .item::before {\n\tbackground-color: rgba(0, 0, 0, 0);\n}\n\n.first-sample-7 .slider .item {\n\twidth: 100%;\n\theight: 100%;\n\toverflow: hidden;\n\tposition: relative;\n}\n\n.first-sample-7 .slider .item::before {\n\tcontent: '';\n\tposition: absolute;\n\tleft: 0;\n\ttop: 0;\n\twidth: 100%;\n\theight: 100%;\n\tbackground-color: rgba(0, 0, 0, 0.8);\n\ttransition: background-color 1s;\n}\n\n.first-sample-7 .slider .item img {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\t\t\t\t\/* image fit or Zoom 100% *\/\n\tobject-position: center center;\n}\n\n.first-sample-7 .prev-slide,\n.first-sample-7 .next-slide {\n\tposition: absolute;\n\ttop: 50%;\n\ttransform: translateY(-50%);\n\twidth: 44px;\n\theight: 44px;\n\tbackground: rgba(0, 0, 0, 0.45);\n\tcolor: #ffffff;\n\tborder-radius: 50%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-size: 14px;\n\tcursor: pointer;\n\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n\tz-index: 10;\n\tborder: 1px solid rgba(255, 255, 255, 0.15);\n\tbackdrop-filter: blur(4px);\n\t-webkit-backdrop-filter: blur(4px);\n}\n\n.first-sample-7 .prev-slide:hover,\n.first-sample-7 .next-slide:hover {\n\tbackground: rgba(0, 0, 0, 0.75);\n\tcolor: #ffffff;\n\ttransform: translateY(-50%) scale(1.08);\n\tbox-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);\n}\n\n\/* position of previous button from slider container (default -70 px) *\/\n.first-sample-7 .prev-slide {\n\tleft: 20px;\n}\n\n\/* position of next button from slider container (default -70 px) *\/\n.first-sample-7 .next-slide {\n\tright: 20px;\n}\n\/* main CSS end *\/\n\n\/* media query CSS start *\/\n@media only screen and (max-width: 600px) {\n\t.sf-3-7 {\n\t\theight: calc(750px \/ 2);\n\t}\n}\n\/* media query CSS end *\/\n<\/style>\n[\/vc_column_text][vc_empty_space height=&#8221;100px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h4 style=\"text-align: center;\"><strong>\u00a0<\/strong><strong>Slider With Custom Height<\/strong><\/h4>\n<p>[\/vc_column_text][\/vc_column][vc_column][vc_empty_space height=&#8221;30px&#8221;][\/vc_column][vc_column][vc_column_text]<script>\njQuery( document ).ready(function() {\n\tjQuery('.first-sample-21 .slider').blue_slider({\n\t\t\/\/ Preset 4 for Free edition\n\t\tslide_template: '1fr 6fr (2,1fr) .5fr',\n\t\tcurrent_fr_index: 2,\n\t\tstart_slide_index: 0, \n\t\tcurrent_fr_index_flow: false,\n\n\t\tauto_play: true,\t\t\t\t\t\t\/\/ to auto play slides (default: false)\n\t\tauto_play_period: 3500,\t\t\t\/\/ auto play speed time (default: 3000) 3sec\n\t\tspeed: 2500,\t\t\t\t\t\/\/ slide transition time (default: 1000) 1 Sec\n\n\t\tslide_gap: 10,\t\t\t\t\t\t\/\/ gap between 2 slides (default: 0)\n\n\t\tcurrent_fr_class: 'my-fr-current',\t\t\t\t\t\t\t\t\/\/ highlighting the current frame\n\t\tactive_fr_class: 'my-fr-active',\n\t\tsencitive_drag: 100,\n\t\tloop: false,\n\t\tarrows: true,\n\t\tprev_arrow: '.first-sample-21 .prev-slide',\n\t\tnext_arrow: '.first-sample-21 .next-slide',\n\t});\n});\n<\/script>\n\n<!-- slider start-->\n<div class=\"sf-3-21\">\n\t<div class=\"first-sample-21\">\n\t\t<div class=\"slider\">\n\t\t\t\t\t\t<div class=\"item\">\n\t\t\t\t\t<img class=\"sf-3-slide-image\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/01\/Picture-6-2.jpg\" alt=\"\" loading=\"lazy\" decoding=\"async\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"sf-3-slide-content\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-3-slide-title\">Coffee Beans<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-3-slide-desc\">A coffee bean is a seed of the Coffea plant and the source for coffee. It is the pit inside the red or purple fruit often referred to as a cherry. Just like ordinary cherries, the coffee fruit is also a so-called stone fruit. ... A small percentage of cherries contain a single seed, instead of the usual two.<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"item\">\n\t\t\t\t\t<img class=\"sf-3-slide-image\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/01\/Picture-4-3.jpg\" alt=\"\" loading=\"lazy\" decoding=\"async\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"sf-3-slide-content\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-3-slide-title\">Dark roast coffee<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-3-slide-desc\">Dark roast coffee is a dark brown color and often has an oily surface. These coffees have a low acidity, heavy body, and tend to reveal deeper, darker flavors. Coffees roasted to this level tend to not have many of their origin characteristics left, but that doesn&#039;t mean that these are bland and boring.<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"item\">\n\t\t\t\t\t<img class=\"sf-3-slide-image\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/01\/Picture-3-3.jpg\" alt=\"\" loading=\"lazy\" decoding=\"async\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"sf-3-slide-content\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-3-slide-title\">Dark roast coffee<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-3-slide-desc\">Dark roast coffee is a dark brown color and often has an oily surface. These coffees have a low acidity, heavy body, and tend to reveal deeper, darker flavors. Coffees roasted to this level tend to not have many of their origin characteristics left, but that doesn&#039;t mean that these are bland and boring.<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"item\">\n\t\t\t\t\t<img class=\"sf-3-slide-image\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/01\/Picture-2-3.jpg\" alt=\"\" loading=\"lazy\" decoding=\"async\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"sf-3-slide-content\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-3-slide-title\">Green Tea<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-3-slide-desc\">Green tea is a type of tea that is made from Camellia sinensis leaves and buds that have not undergone the same withering and oxidation process used to make oolong teas and black teas. ... Green tea originated in China, but its production and manufacture has spread to other countries in East Asia.<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"item\">\n\t\t\t\t\t<img class=\"sf-3-slide-image\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/01\/Picture-1-3.jpg\" alt=\"\" loading=\"lazy\" decoding=\"async\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"sf-3-slide-content\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-3-slide-title\">Green Tea &amp; Flower<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-3-slide-desc\">Green tea is a type of tea that is made from Camellia sinensis leaves and buds that have not undergone the same withering and oxidation process used to make oolong teas and black teas. ... Green tea originated in China, but its production and manufacture has spread to other countries in East Asia.<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"item\">\n\t\t\t\t\t<img class=\"sf-3-slide-image\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-content\/uploads\/sites\/7\/2021\/01\/Picture-7-2.jpg\" alt=\"\" loading=\"lazy\" decoding=\"async\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"sf-3-slide-content\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-3-slide-title\">Green Tea &amp; Flower<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sf-3-slide-desc\">Green tea is a type of tea that is made from Camellia sinensis leaves and buds that have not undergone the same withering and oxidation process used to make oolong teas and black teas. ... Green tea originated in China, but its production and manufacture has spread to other countries in East Asia.<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t<\/div>\n\t\t\t\t<i class=\"prev-slide \"><i class=\"fa fa-chevron-left\"><\/i><\/i>\n\t\t<i class=\"next-slide \"><i class=\"fa fa-chevron-right\"><\/i><\/i>\n\t\t\n\t<\/div>\n<\/div>\n<!-- slider end-->\n\n<style>\n.sf-3-21 {\n\tmargin-left: auto;\n\tmargin-right: auto;\n\twidth: 100%;\n\theight: 350px;\n}\n\n.sf-3-21 .sf-3-slide-content {\n\tposition: absolute;\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n\tbackground: linear-gradient(to top, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.4) 70%, transparent 100%);\n\tcolor: #ffffff;\n\tpadding: 16px;\n\tz-index: 5;\n\tpointer-events: none;\n\tbox-sizing: border-box;\n}\n\n.sf-3-21 .sf-3-slide-title {\n\tfont-size: 14px;\n\tfont-weight: 700;\n\tcolor: #ffffff;\n\tline-height: 1.3;\n\ttext-shadow: 0 1px 3px rgba(0,0,0,0.5);\n\tmargin-bottom: 22px;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n}\n\n.sf-3-21 .sf-3-slide-desc {\n\tfont-size: 12px;\n\tcolor: rgba(255,255,255,0.85);\n\tline-height: 1.4;\n\ttext-shadow: 0 1px 2px rgba(0,0,0,0.5);\n\tposition: absolute;\n\tbottom: 14px;\n\tleft: 16px;\n\tright: 16px;\n\topacity: 0;\n\tvisibility: hidden;\n\tpointer-events: none;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\ttransition: opacity 0.15s ease 0s, visibility 0s 0.15s;\n}\n\n.first-sample-21 .slider .slide-item.my-fr-current .sf-3-slide-desc {\n\topacity: 1;\n\tvisibility: visible;\n\tpointer-events: auto;\n\ttransition: opacity 0.5s ease 2.2s, visibility 0s 2.2s;\n}\n\n\/* main CSS start *\/\n.first-sample-21 {\n\twidth: 100%;\t\t\t\t\/* width of slider *\/\n\theight: 100%;\t\t\t\t\/* height of slider *\/\n\tborder: none;\n\tborder-radius: 0;\n\tposition: relative;\n\tbackground-color: #1c1c1c;\t\/* background color of slider *\/\n}\n\n.first-sample-21 .slider {\n\theight: 100%;\n}\n\n.first-sample-21 .slider .slide-wrapper {\n\toverflow: hidden;\n\theight: 100%;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n}\n\n.first-sample-21 .slider .slide-tracker {\n\theight: 100%;\n}\n\n.first-sample-21 .slider .slide-item {\n\theight: 100%;\n}\n\n.first-sample-21 .slider .slide-tracker .my-fr-current .item::before {\n\tbackground-color: rgba(0, 0, 0, 0);\n}\n\n.first-sample-21 .slider .item {\n\twidth: 100%;\n\theight: 100%;\n\toverflow: hidden;\n\tposition: relative;\n}\n\n.first-sample-21 .slider .item::before {\n\tcontent: '';\n\tposition: absolute;\n\tleft: 0;\n\ttop: 0;\n\twidth: 100%;\n\theight: 100%;\n\tbackground-color: rgba(0, 0, 0, 0.8);\n\ttransition: background-color 1s;\n}\n\n.first-sample-21 .slider .item img {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\t\t\t\t\/* image fit or Zoom 100% *\/\n\tobject-position: center center;\n}\n\n.first-sample-21 .prev-slide,\n.first-sample-21 .next-slide {\n\tposition: absolute;\n\ttop: 50%;\n\ttransform: translateY(-50%);\n\twidth: 44px;\n\theight: 44px;\n\tbackground: rgba(0, 0, 0, 0.45);\n\tcolor: #ffffff;\n\tborder-radius: 50%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-size: 14px;\n\tcursor: pointer;\n\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n\tz-index: 10;\n\tborder: 1px solid rgba(255, 255, 255, 0.15);\n\tbackdrop-filter: blur(4px);\n\t-webkit-backdrop-filter: blur(4px);\n}\n\n.first-sample-21 .prev-slide:hover,\n.first-sample-21 .next-slide:hover {\n\tbackground: rgba(0, 0, 0, 0.75);\n\tcolor: #ffffff;\n\ttransform: translateY(-50%) scale(1.08);\n\tbox-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);\n}\n\n\/* position of previous button from slider container (default -70 px) *\/\n.first-sample-21 .prev-slide {\n\tleft: 20px;\n}\n\n\/* position of next button from slider container (default -70 px) *\/\n.first-sample-21 .next-slide {\n\tright: 20px;\n}\n\/* main CSS end *\/\n\n\/* media query CSS start *\/\n@media only screen and (max-width: 600px) {\n\t.sf-3-21 {\n\t\theight: calc(350px \/ 2);\n\t}\n}\n\/* media query CSS end *\/\n<\/style>\n[\/vc_column_text][vc_empty_space height=&#8221;200px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text css_animation=&#8221;bounceIn&#8221;]<\/p>\n<div class=\"wpb_text_column wpb_content_element wpb_animate_when_almost_visible wpb_bounceIn bounceIn wpb_start_animation animated\">\n<div class=\"wpb_wrapper\">\n<h2 style=\"text-align: center;\"><strong>Design Beautifull Responsive Image Slider<\/strong><\/h2>\n<\/div>\n<\/div>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;30px&#8221;][vc_row_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_icon icon_fontawesome=&#8221;fas fa-download&#8221; color=&#8221;green&#8221; size=&#8221;xl&#8221; align=&#8221;center&#8221; css_animation=&#8221;bounceIn&#8221;][vc_btn title=&#8221;Download Slider Factory&#8221; shape=&#8221;round&#8221; color=&#8221;green&#8221; align=&#8221;center&#8221; css_animation=&#8221;bounceIn&#8221; link=&#8221;url:https%3A%2F%2Fwordpress.org%2Fplugins%2Fslider-factory%2F|target:_blank&#8221;][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_icon icon_fontawesome=&#8221;fas fa-desktop&#8221; color=&#8221;peacoc&#8221; size=&#8221;xl&#8221; align=&#8221;center&#8221; css_animation=&#8221;bounceIn&#8221;][vc_btn title=&#8221;Check Slider Factory Pro Demo&#8221; shape=&#8221;round&#8221; color=&#8221;peacoc&#8221; align=&#8221;center&#8221; css_animation=&#8221;bounceIn&#8221; link=&#8221;url:https%3A%2F%2Fwpfrank.com%2Fwordpress-plugins%2Fslider-factory-pro%2F|target:_blank&#8221;][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_icon icon_fontawesome=&#8221;fas fa-download&#8221; color=&#8221;pink&#8221; size=&#8221;xl&#8221; align=&#8221;center&#8221; css_animation=&#8221;bounceIn&#8221;][vc_btn title=&#8221;Buy Slider Factory Pro&#8221; shape=&#8221;round&#8221; color=&#8221;danger&#8221; align=&#8221;center&#8221; css_animation=&#8221;bounceIn&#8221; link=&#8221;url:https%3A%2F%2Fwpfrank.com%2Faccount%2Fsignup%2Fslider-factory-pro|target:_blank&#8221;][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column][vc_column_text] A Basic Example [\/vc_column_text][\/vc_column][vc_column][vc_empty_space height=&#8221;30px&#8221;][\/vc_column][vc_column][vc_column_text][\/vc_column_text][vc_empty_space height=&#8221;100px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text] Autoplay Slide Show [\/vc_column_text][\/vc_column][vc_column][vc_empty_space height=&#8221;30px&#8221;][\/vc_column][vc_column][vc_column_text][\/vc_column_text][vc_empty_space height=&#8221;100px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text] \u00a0Slider With Custom Height [\/vc_column_text][\/vc_column][vc_column][vc_empty_space height=&#8221;30px&#8221;][\/vc_column][vc_column][vc_column_text][\/vc_column_text][vc_empty_space height=&#8221;200px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text css_animation=&#8221;bounceIn&#8221;] Design Beautifull Responsive Image Slider [\/vc_column_text][vc_empty_space height=&#8221;30px&#8221;][vc_row_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_icon icon_fontawesome=&#8221;fas fa-download&#8221; color=&#8221;green&#8221; size=&#8221;xl&#8221; align=&#8221;center&#8221; css_animation=&#8221;bounceIn&#8221;][vc_btn title=&#8221;Download Slider Factory&#8221; shape=&#8221;round&#8221; color=&#8221;green&#8221; align=&#8221;center&#8221; css_animation=&#8221;bounceIn&#8221; link=&#8221;url:https%3A%2F%2Fwordpress.org%2Fplugins%2Fslider-factory%2F|target:_blank&#8221;][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_icon icon_fontawesome=&#8221;fas fa-desktop&#8221; color=&#8221;peacoc&#8221; size=&#8221;xl&#8221; align=&#8221;center&#8221; css_animation=&#8221;bounceIn&#8221;][vc_btn title=&#8221;Check Slider Factory Pro Demo&#8221; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-861","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-json\/wp\/v2\/pages\/861","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-json\/wp\/v2\/comments?post=861"}],"version-history":[{"count":5,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-json\/wp\/v2\/pages\/861\/revisions"}],"predecessor-version":[{"id":883,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-json\/wp\/v2\/pages\/861\/revisions\/883"}],"wp:attachment":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-free-wordpress-plugin\/wp-json\/wp\/v2\/media?parent=861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}