{"id":349,"date":"2017-02-19T04:35:09","date_gmt":"2017-02-19T04:35:09","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=349"},"modified":"2020-02-20T14:46:31","modified_gmt":"2020-02-20T14:46:31","slug":"fullscreen-slider","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/fullscreen-slider\/","title":{"rendered":"Fullscreen Slider"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_heading-d5df28ff376029e2007ccd1da57943f1\">\n#top .av-special-heading.av-av_heading-d5df28ff376029e2007ccd1da57943f1{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-av_heading-d5df28ff376029e2007ccd1da57943f1 .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-av_heading-d5df28ff376029e2007ccd1da57943f1 .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-av_heading-d5df28ff376029e2007ccd1da57943f1 av-special-heading-h2 blockquote modern-quote  avia-builder-el-0  el_before_av_hr  avia-builder-el-first '><h2 class='av-special-heading-tag '  itemprop=\"headline\"  >Fullscreen Slider<\/h2><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-4u717p-46c028f4136591c2c8f54fcd043c5ded hr-default  avia-builder-el-1  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-4siahh-0e9d556200a71a58bf71d02ab666b80c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Overview<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-4igoql-19f300f8a5968399ad28706598832964 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>This\u00a0slider stretches across the whole screen. You can set multiple sliders per page and also set their properties individually. Like, for example, the background image behaviour (parallax anyone?), image color overlays, captions, etc<\/p>\n<p>Examples of <a href=\"https:\/\/kriesi.at\/themes\/enfold-2017\/elements\/fullscreen-slider\/\">fullscreen slider element<\/a>.<\/p>\n<\/div><\/section>\n<div  class='hr av-g0zvh-5eba12f9dba69d4c4cf78f20583b8e29 hr-default  avia-builder-el-4  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-46711p-4b413e1d82ba02feac71822407635357 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>CODE SNIPPETS<\/h2>\n<\/div><\/section>\n<div  class='avia-builder-widget-area clearfix  avia-builder-el-6  el_after_av_textblock  el_before_av_hr '><div id=\"text-3\" class=\"widget clearfix widget_text\">\t\t\t<div class=\"textwidget\"><p><strong>How to use the snippets?<\/strong><\/p>\n<ul>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-css\/\" target=\"_blank\" rel=\"noopener\">CSS Snippets<\/a> to Enfold child theme styles.<\/li>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-js-or-php-script\/\" target=\"_blank\" rel=\"noopener\">JS and PHP scripts<\/a> to your\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-install-enfold-theme\/#why-child-theme\" target=\"_blank\" rel=\"noopener\">child theme<\/a>\u00a0functions.php file.<\/li>\n<li>Shortcodes can be used in a text area in pages, posts, sliders and widget areas.\u00a0Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#debug-mode\" target=\"_blank\" rel=\"noopener\">debug mode<\/a>\u00a0to view the page shortcode.<\/li>\n<li>Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#turn-on-custom-css-class-field-for-all-alb-elements\">custom CSS class name support<\/a>\u00a0to\u00a0add your\u00a0class names to the theme elements.<\/li>\n<li>Disable <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-clear-the-cache\/\" target=\"_blank\" rel=\"noopener\">script merging and clear the cache<\/a>\u00a0to view the changes on the frontend.<\/li>\n<\/ul>\n<p><strong>NOTE<\/strong>: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due\u00a0to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.<\/p>\n<\/div>\n\t\t<\/div><\/div>\n<div  class='hr av-3vczdp-623521319343fc21b9f8572a5a9d4253 hr-default  avia-builder-el-7  el_after_av_sidebar  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3omahx-9c1788438f81f9c3ce4d0ec64a3ed3b1 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Shortcode<\/h3>\n<\/div><\/section>\n\n<div  class='hr av-brzdx-685d2ff1bc17c5c3018bf8388d2fb7de hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-31lke5-4d08cb6bf8fafb992f38af1c095aac13 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Customization<\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-3mybjo-680a7d2c186c10f4fd46064577a9e865 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Fullscreen slider custom size<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3mybjo-680a7d2c186c10f4fd46064577a9e865 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>As the name says the &#8220;Fullscreen slider&#8221; will stretch the entire height and width of the browser window. If you wish to change the default behaviour of the fullscreen slider element please add a custom CSS class name &#8220;<strong>av-full-slider-custom-size<\/strong>&#8221; and change the height and width value in the below code to suit your design.<\/p>\n<p>Example of <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-custom-size-fullscreen-slider\/\" target=\"_blank\" rel=\"noopener\">custom size fullscreen slider<\/a>.<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jhect9qc-f0d56e7aebc3dd7017679b985c24bef0 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-ayt8c-d44e6cc44eb83a87ac1b4389d455c1f8'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-1' data-fake-id='#toggle-id-1' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-1' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-1' aria-labelledby='toggle-toggle-id-1' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><code><br \/>\n\/*----------------------------------------<br \/>\n\/\/ fullscreen slider with custom size<br \/>\n\/\/--------------------------------------*\/<\/p>\n<p>.av-full-slider-custom-size .avia-slideshow {<br \/>\n    \/* Custom height *\/<br \/>\n    max-height: 60vh !important;<\/p>\n<p>\t\/* Custom width *\/<br \/>\n    max-width: 75vw !important;<br \/>\n    position: relative;<br \/>\n    left: 50%;<br \/>\n    transform: translateX(-50%);<br \/>\n}<\/p>\n<p>.av-full-slider-custom-size.avia-fullscreen-slider .avia-slideshow>ul>li {<br \/>\n    background-repeat: no-repeat;<\/p>\n<p>    \/* to display full background image adjust the width and height below*\/<br \/>\n\/*     background-size: 100% 100%; *\/<br \/>\n}<br \/>\n<\/code><\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-2xoljp-b196dae9d4701921946e244b6476798e hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3mybjo-c3ee34e7febdc835d044f49bf34c3efc '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Responsive image in small screens<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3mybjo-c3ee34e7febdc835d044f49bf34c3efc '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>If your slider image appears to be very large on small screens and only a portion of the image is displayed. You can add the below CSS to Enfold > General Styling > Quick CSS to scale the image down to the browser width.<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jhect9qc-b68b2fcd8d57c9c3fcf1ef1b6ea5caa1 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-av_toggle-9819947a4e7a540563f9788937ca30c9'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-2' data-fake-id='#toggle-id-2' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-2' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-2' aria-labelledby='toggle-toggle-id-2' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><code><br \/>\n\/* CSS to scale down fullscreen slider image *\/<\/p>\n<p>.avia-fullscreen-slider .avia-slideshow>ul>li {<br \/>\n    background-size: cover !important;<br \/>\n}<br \/>\n<\/code><\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-2xoljp-b196dae9d4701921946e244b6476798e hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-2r7rlp-63c97f226aafadda54c5af1b50a73ca2 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Font style<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-2ifhst-ba8954db6e1a50a1694311e1cc2296f1 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To add custom styles to the fullscreen slider title and caption fonts please use the CSS below.<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-2f1qb9-380f295c828ba6886e77b7b57ed37ad1 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/*----------------------------------------\n\/\/ CSS -Fullscreen Slider font style\n\/\/--------------------------------------*\/\n\n\/* Caption title *\/\n#top .avia-fullwidth-slider .avia-caption-title {\n\/*Your style here *\/\n}\n\n\/*caption content *\/\n#top .avia-fullwidth-slider .avia-caption-content p {\n\/*Your style here *\/\n}\n\n<\/pre>\n<\/div><\/section>\n<div  class='hr av-2atc79-7224053192f0a5f2ef3c4f0944637f40 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-23qrul-69cd1f7b765e62706d78fa0a40e142f6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Button Style<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-1vj6n9-960716095360c8d4d33bb36a762d1205 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The button styles can be changed from the element settings. However,\u00a0 to custom style the button please\u00a0use the CSS below.<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-1p19cl-f06fcb938dafe598a1db6afdeb96b13d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/*----------------------------------------\n\/\/ CSS -Fullscreen Slider button style\n\/\/--------------------------------------*\/\n\n\/* Slideshow button *\/\n#top .avia-fullwidth-slider .slideshow_inner_caption .avia-slideshow-button {\n\/*Your style here *\/\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-5nqdh-f531cc43a768961b31baa19b99db4bc4 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1dd219-364cc4f5f1c61b80328dbb2d06e3139c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Multiple buttons in slider<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-4g4xh-1200e5156f553ba1253c3f3c73c6a148 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Using the element setting you can add up to two buttons. To add more than two buttons to the slides please use the button shortcode in the caption text area with your caption text.<\/p>\n<\/div><\/section>\n\n<div  class='hr av-minwt-ea3f6001cd01efbd6e775a41f7257d9d hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-ft68l-a5ad936f3d1292142411569227e110cb '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Caption background and width<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-ztmd-d46a8469dc0bf874f4ae7f46828a8dfa '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To custom style the slider\u00a0caption area, to add a background\u00a0color or to change the width please use the\u00a0 CSS selector below.<\/p>\n<pre>\/*----------------------------------------\n\/\/ CSS - Fullscreen caption area\n\/\/--------------------------------------*\/\n\n\/* Slideshow caption background and width *\/\n#top .avia-fullwidth-slider .slideshow_inner_caption {\n\t\/*Your style here *\/\n}<\/pre>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[2,8],"tags":[],"class_list":["post-349","post","type-post","status-publish","format-standard","hentry","category-documentation","category-media-elements","documentation","media-elements"],"modified_by":"vinay","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/349","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/comments?post=349"}],"version-history":[{"count":4,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/349\/revisions"}],"predecessor-version":[{"id":12817,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/349\/revisions\/12817"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}