{"id":348,"date":"2017-02-19T04:35:22","date_gmt":"2017-02-19T04:35:22","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=348"},"modified":"2018-05-25T06:17:54","modified_gmt":"2018-05-25T06:17:54","slug":"fullwidth-easy-slider","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/fullwidth-easy-slider\/","title":{"rendered":"Fullwidth Easy Slider"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_heading-cf269087ba23d044b85bdd424f01d7d6\">\n#top .av-special-heading.av-av_heading-cf269087ba23d044b85bdd424f01d7d6{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-av_heading-cf269087ba23d044b85bdd424f01d7d6 .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-av_heading-cf269087ba23d044b85bdd424f01d7d6 .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-av_heading-cf269087ba23d044b85bdd424f01d7d6 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\"  >Fullwidth Easy Slider<\/h2><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-5nxygc-8ddc0da74f7d6a7595cbc9ca5c153609 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-5jvo90-dade5f3927d656a1098ed2457adb113a '   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-5bhrf8-caa0513059fb78a9546eb516c75eaa6b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The\u00a0<strong>Easy Slider<\/strong>\u00a0element allows you to set up a simple slideshow within seconds, either at the top of your page, stretching\u00a0across\u00a0the whole viewport, or as a content element anywhere on the page.<\/p>\n<p>You can choose between<strong>\u00a0fade and slide<\/strong>\u00a0transition,\u00a0<strong>duration<\/strong>\u00a0of slide interval and position. \u00a0You can add\u00a0<strong>any number of slideshows<\/strong>\u00a0you want to a page<\/p>\n<p>Examples of <a href=\"https:\/\/kriesi.at\/themes\/enfold-2017\/elements\/easy-slider\/\">Easy slider<\/a> element.<\/p>\n<\/div><\/section>\n<div  class='hr av-5afivo-f65bbe01134da250203ed84fc09250b8 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-52z2j0-057c4c9b60e9b14f5108577b2cc42280 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Code snippet<\/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-4nkjkc-f16bab13eb16e2574a56569f7fac9615 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-4i4cak-b4b963c597acde8f027e815403aaf963 '   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-409924-2c398493eca4251f822ac5a37450d018 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3v04f0-cb0dd90bec0c9bdba471679f98dc0f66 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Customization<\/h2>\n<\/div><\/section>\n<div  class='hr av-3q5wt8-2049322d8d7a285c0b1ca1038e8d4432 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3mybjo-c44e745eae387b904de607d8a7f8c308 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Title and caption font<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3edcv0-071587776e198b4aa70b88abde17ee84 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Ass custom style to easy slider title and caption fonts.<\/p>\n<pre>\/*----------------------------------------\r\n\/\/ CSS - Easyslider font style\r\n\/\/--------------------------------------*\/\r\n\r\n\/* Easy slider title *\/\r\n.av_slideshow_full .avia-caption-title {\r\n\t\/*Your style here *\/\r\n}\r\n\r\n\/* Easy slider caption content *\/\r\n.av_slideshow_full .avia-caption-content p {\r\n\t\/*Your style here *\/\r\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-3b2ib8-d9713855f04ef85a6aaefbf2dd2f8d0b hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-31eq90-19bcafb45a4acca2afc95b37d465147d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Caption Background<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-2ui2v0-45d0d0b4731c887f3f45f7aeba66e43c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To add a custom background or align the caption elements please use the CSS selector below.<\/p>\n<pre> \/*----------------------------------------\r\n\/\/ CSS - Easyslider caption area\r\n\/\/--------------------------------------*\/\r\n\r\n\/\/* Easy slider caption area *\/\r\n.av_slideshow_full .slideshow_inner_caption  {\r\n\t\/*Your style here *\/\r\n}<\/pre>\n<p>If the caption frame is activated in the element options please use the CSS below to change the background color of the caption frame.<\/p>\n<pre>.\/*----------------------------------------\r\n\/\/ CSS - Easyslider caption frame\r\n\/\/--------------------------------------*\/\r\ncaption_framed .slideshow_caption .avia-caption-title{\r\n\t\/* Your style here *\/\r\n }\r\n.caption_framed .slideshow_caption .avia-caption-content p{\r\n\t\/* Your style here *\/\r\n }<\/pre>\n<\/div><\/section>\n<div  class='hr av-2qjpv0-e63384b142ce13f0b9233d89d0821914 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-2id1u4-28c6b290ca4964daad0a4f2fc455764d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Caption buttons<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-2dnlj0-020c73eede785914aa2e3fb57bfa9ad7 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Custom style the easy slider button elements using the CSS below.<\/p>\n<pre>\/* Easyslider button *\/\r\n#top .av_slideshow_full .avia-slideshow-button {\r\n\t\/*Your style here *\/\r\n}\r\n<\/pre>\n<\/div><\/section>\n<div  class='hr av-26t1r8-d8dc51b029dc5d5b49abc53afcc23408 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-2361pg-015aa60d8bdc7d006fc939f8b89a4db1 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Slider Arrows<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-1zb3e4-4f2da5c39fc5ccfb5e9c92f1da45c66b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Navigation arrows can be custom styled using the CSS below.<\/p>\n<pre> \/* Easyslider navigation arrow *\/\r\n#top .avia-slideshow-arrows a {\r\n\t\/*Your style here *\/\r\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-lpwk-b46acb159e5d39e86227be0bccaf7c8a hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1lsx2s-44a3ddf15a0a4ab08bceb129f3e6245b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Slider navigation dots<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-1fzwdw-3204267c24daba429bebb8fc892049f0 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Navigation dots inherits the default theme styles. To add custom style to the navigation dots please use the CSS below.<\/p>\n<pre>\/* Easyslider navigation dots *\/\r\n#top .avia-slideshow-dots a {\r\n\t\/*Your style here *\/\r\n}\r\n\r\n\/* Easyslider navigation actvive dots *\/\r\n#top .avia-slideshow-dots a.active {\r\n\t\/*Your style here *\/\r\n}\r\n<\/pre>\n<\/div><\/section>\n<div  class='hr av-16l898-439a2d6490c2a85383291022ccc1d794 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-110ebg-0106cd5191b0260c3740afab36b4ff0c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Slider Button Style<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-xiiok-434242c0aafea4c5a2f88d83aef09965 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Button styles can be selected from the slider element options. To add custom style to the slider buttons please use the CSS below.<\/p>\n<pre> \/* Easyslider button *\/\r\n#top .av_slideshow_full .avia-slideshow-button {\r\n\t\/*Your style here *\/\r\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-p54dg-aebd78a95208f1005e8b3d46c3418950 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-7mmh46-8ef5779dd252c3a01c6d67b61e562307 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Animating slider title, caption and buttons<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-7soh2-61e4d7e0cd35883ab32f0ff25d10c6db '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The slider title, caption, and buttons can be animated using custom CSS animation or you can try any of the animation variables used in the enfold theme in the CSS\u00a0code provided below.<\/p>\n<p>Example of <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/2018\/05\/06\/example-of-animated-slider-title-captions-and-buttons\/\" target=\"_blank\" rel=\"noopener\">animated slider caption, title and buttons<\/a>.<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-m99zi-cc28ba32c3c0a3f3e69c6aca4d76bfd2 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/* Slider title, content and button animation *\/\r\n\r\n.avia_transform .active-slide .avia-caption-title, \r\n.avia_transform .active-slide .avia-caption-content, \r\n.avia_transform .active-slide .avia-slideshow-button-2, \r\n.avia_transform .active-slide .avia-slideshow-button {\r\n\r\n    -webkit-animation: avia_pop 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275)!important; \r\n    animation:         avia_pop 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275)!important; \r\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-7wucxy-4c7d0d08a837b7fd5542ef4268e98142 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-7mmh46-1253cb26f25d066f80690d97f95e08a3 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Slider caption above title<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-7mmh46-1253cb26f25d066f80690d97f95e08a3 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To move the slider caption above the title as seen below please add the CSS to your site.<\/p>\n<pre> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8716\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/PADPlGu.jpg\" alt=\"\" width=\"986\" height=\"525\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/PADPlGu.jpg 986w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/PADPlGu-300x160.jpg 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/PADPlGu-768x409.jpg 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/PADPlGu-705x375.jpg 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/PADPlGu-600x319.jpg 600w\" sizes=\"auto, (max-width: 986px) 100vw, 986px\" \/> \r\n\r\n\/* CSS - Caption above title *\/\r\n\r\n\r\n#top .avia-fullwidth-slider .slideshow_align_caption {\r\n    display: flex!important;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    flex-wrap:wrap;\r\n}\r\n#top .avia-fullwidth-slider h2.avia-caption-title,\r\n#top .avia-fullwidth-slider .avia-caption-content {\r\n   position: relative;\r\n}\r\n\r\n#top.avia-fullwidth-slider h2.avia-caption-title {    \r\n    order:2;\r\n}\r\n#top .avia-fullwidth-slider .avia-caption-content {    \r\n    padding: 0;\r\n    order:1;\r\n}\r\n\r\n#top .avia-fullwidth-slider .avia-slideshow-button {\r\n    order:3;\r\n}\r\n\r\n\/* End CSS *\/\r\n\r\n<\/pre>\n<\/div><\/section>\n<div  class='hr av-7wucxy-4c7d0d08a837b7fd5542ef4268e98142 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-2c41o-8c0aa09444ea6fa8e4b2b6f6f97d389c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Resource<\/h2>\n<\/div><\/section>\n<div  class='hr av-fxzuk-a4a3fe003ac0981be0d82daaf7bd516c hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-893hg-dbaa275b634bca7d5264e2e550884e4e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Contributed video<\/strong>:<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=4he2OiLl9RQ\"> Full Width Slider Element Tutorial <\/a><\/p>\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-348","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\/348","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=348"}],"version-history":[{"count":7,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/348\/revisions"}],"predecessor-version":[{"id":8715,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/348\/revisions\/8715"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}