Dynamic slider Oxygen paste

{"component":{"id":70,"name":"ct_section","options":{"ct_id":70,"ct_parent":100004,"selector":"section-70-150","original":{"image_type":"2","attachment_size":"full","section-width":"full-width","container-padding-left":"0","container-padding-left-unit":"rem","container-padding-right":"0","container-padding-right-unit":"rem","container-padding-top":"0","container-padding-top-unit":"rem"},"nicename":"Sliders section","activeselector":false},"depth":2,"children":[{"id":78,"name":"ct_div_block","options":{"ct_id":78,"ct_parent":70,"selector":"div_block-78-150","original":{"width-unit":"%","width":"100"},"nicename":"Slider Overall wrapper"},"depth":3,"children":[{"id":76,"name":"ct_code_block","options":{"ct_id":76,"ct_parent":78,"selector":"code_block-76-150","original":{"image_type":"2","attachment_size":"full","code-php":"<?php\n\t#echo \"hello world!\";\n?>","code-js":"\n\ndocument.addEventListener('DOMContentLoaded', ()=>{\n\n\n\t// for more settings, to to https://swiperjs.com/demos\n\n\n\t// Declare all variables\n\tlet pagination, prev, next, swiperWraps\n\t\t\n\n\n\t// Assign all variables\n\n\tswiperWraps = document.querySelectorAll('.oxel_dynamicslider')  \n\n\tswiperWraps.forEach(swiperWrap => {\t  \n\n\t\t//create pagination, prev, and next divs\n\t\tpagination = document.createElement('div')\t\n\t\tprev = document.createElement('div')\n\t\tnext = document.createElement('div')\n\n\n\t\t//add classes to the variables\n\t\tpagination.classList.add('swiper-pagination')\n\t\tprev.classList.add('swiper-button-prev')\n\t\tnext.classList.add('swiper-button-next')\n\n\t\t// append created elements to the Dynamic Slider div\n\t\tswiperWrap.append(pagination, prev, next)\n\t})\n\n\n\n\n\n});\n\n//ARROW VISIBILITY FUNCTIONS\n\nfunction hideArrowOnMobile(prev, next) {\n\n\tif ( window.innerWidth < 1024  ) {\n\n\t\tprev.style.display = 'none';\n\t\tnext.style.display = 'none';\n\t} else {\n\t\tprev.style.display = 'block';\n\t\tnext.style.display = 'block';\n\t}\n}\n\n\nfunction hideArrowOnDesktop(prev, next) {\n\n\n\tif ( window.innerWidth > 1024  ) {\n\n\t\tprev.style.display = 'none';\n\t\tnext.style.display = 'none';\n\t} else {\n\t\tprev.style.display = 'block';\n\t\tnext.style.display = 'block';\n\t}\n}\t\n\n\n\nfunction hideArrow(prev, next) {  \n\n\n\tprev.style.display = 'none';\n\tnext.style.display = 'none';\n\n}\n\n\n\n\n//DOTS VISIBILITY FUNCTIONS\n\nfunction hideDotsOnMobile(dot) {\n\n\n\tif ( window.innerWidth < 1024  ) {\n\n\t\tdot.style.display = 'none';\n\n\t} else {\n\t\tdot.style.display = 'block';\n\n\t}\n}\n\n\nfunction hideDotsOnDesktop(dot) {\n\n\n\tif ( window.innerWidth > 1024  ) {\n\n\t\tdot.style.display = 'none';\n\n\t} else {\n\t\tdot.style.display = 'block';\n\n\t}\n}\t\n\n\n\nfunction hideDots(dot) {\t\n\n\tdot.style.display = 'none';\n\n}\n","code-css":"\n/* Left and right arrow color. */\n.oxel_dynamicslider .swiper-button-prev,\n.oxel_dynamicslider .swiper-button-next {\n\tcolor: var(--primary);\n}\n\n/* Left and right arrow size. */\n.oxel_dynamicslider .swiper-button-prev:after,\n.oxel_dynamicslider .swiper-button-next:after {\n\tfont-size: 50px; \n}\n\n\n/* navigation bullet position */\n\n.oxel_dynamicslider .swiper-pagination {\t\n\ttop: 101%;\n\tleft: 50%;\n\ttransform: translate3d(-50%,0,0);\n}\n\n/* navigation bullet size, shape and spacing */\n.swiper-pagination-bullet {\n\twidth: 8px;\n\theight: 8px;\n\tdisplay: inline-block;\n\tborder-radius: 100%;\n\tbackground: #000;\n\topacity: .2;\n\tmargin: 0 .5rem;\n}\n\n\n\n/* Active navigation bullet color. */\n.oxel_dynamicslider .swiper-pagination-bullet-active {\n\tbackground-color: black; \n\topacity: 0.8;\n}\n\n\n\n/*-----------CUSTOM STYLES-------------*/\n\n\n/*-----SWIPER1------*/\n\n/* ARROWS */\n/*arrow type*/\n\n#swiper1 .swiper-button-prev::after, \n#swiper1 .swiper-container-rtl .swiper-button-next::after {\n\tcontent: '\\21CB';\t\n}\n\n\n#swiper1 .swiper-button-next::after, \n#swiper1 .swiper-container-rtl .swiper-button-prev::after{\n\tcontent: '\\21CC';\n\t\n}\n\n/*arrow position*/\n#swiper1 .swiper-button-next, \n#swiper1 .swiper-button-prev {\n   \n    top: 105%;\n\tdisplay: flex !important;\n}\n\n#swiper1 .swiper-button-next {\n   \n    right: calc(50% - 162px)\n}\n\n#swiper1 .swiper-button-prev{\n   \n    left: calc(50% - 162px)\n}\n\n\n\n/* DOTS */\n\n\n/* SLIDES */\n\n/*slide style*/\nbody:not(.ng-scope) #swiper1 .swiper-slide {\n\ttransform: scale(0.85, 0.85);\n\topacity: 0.5;\n\ttransition: 0.8s;\n}\n\n/*active slide style*/\nbody:not(.ng-scope) #swiper1 .swiper-slide-active {\n\ttransform: scale(1, 1);\n\topacity: 1;\n\tbox-shadow: 0px 0px 2.7px rgb(0 161 255 / 28%), \n\t\t0px 0px 9.2px rgb(0 184 255 / 11%), \n\t\t0px 0px 41px rgb(0 95 163 / 22%);\n\n}\n\n\n\n\n\n\n\n\n/*-----SWIPER2-----*/\n\n/* ARROWS */\n\n/*arrow type*/\n\n#swiper2 .swiper-button-prev::after, \n#swiper2 .swiper-container-rtl .swiper-button-next::after {\n\tcontent: '\\290C';\t\n}\n\n\n#swiper2 .swiper-button-next::after, \n#swiper2 .swiper-container-rtl .swiper-button-prev::after{\n\tcontent: '\\290D';\n\t\n}\n\n/*arrow position*/\n\n#swiper2 .swiper-button-prev{\n\tleft: calc(50% - 10rem);;\n\ttop: 115%;\n}\n\n#swiper2 .swiper-button-next{\n\tright: calc(50% - 10rem);\n\ttop: 115%;\n}\n\n/* DOTS */\n\n\n\n\n/* SLIDES */\n\n\n\n/*-----SWIPER3-----*/\n\n/* ARROWS */\n\n\n#swiper3 .swiper-button-prev::after, \n#swiper3 .swiper-container-rtl .swiper-button-next::after {\n\tcontent: '\\2962';\n\t\n}\n\n\n#swiper3 .swiper-button-next::after, \n#swiper3 .swiper-container-rtl .swiper-button-prev::after{\n\tcontent: '\\2964';\n\t\n}\n\n#swiper3 .swiper-button-next {\n\tright: 10%;\n\ttop: auto;\n\tbottom: 8rem;\n}\n\n\n#swiper3 .swiper-button-prev {\n\tleft: auto;\n\tright: 20%;\n\ttop: auto;\n\tbottom: 8rem;\n}\n\n#swiper3 .swiper-button-prev, \n#swiper3 .swiper-button-next {\n\tcolor: #ffffffa8;\n}\n\n\n\n/* DOTS */\n\n/*dot container style*/\n#swiper3 .swiper-pagination {\n\ttop: auto;\n\tbottom: 13rem;\n\tleft: auto;\n\tright: 15%;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 1rem;\n}\n\n/*dot style*/\n#swiper3 .swiper-pagination-bullet {\n\n\tbackground: #fff;\n\topacity: 0.3;\n\ttransition: .8s;\n\tborder-radius: 3px;\n\n}\n/*active dots style*/\n#swiper3 .swiper-pagination-bullet-active {\n\tbackground-color: white;\n\topacity: 0.8;\n\theight: 32px;\n\tborder-radius: 3px;\n\n}\n\n/* SLIDES */\n"},"nicename":"Arrow and Dots code","activeselector":false},"depth":4},{"id":55,"name":"ct_code_block","options":{"ct_id":55,"ct_parent":78,"selector":"code_block-55-150","original":{"code-php":"<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css\" />\n\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js\"></script>\n\n<!-- Instructions\n\nThe Dynamic Slider is a Repeater wrapped in a swiper.js container.\n\nTo edit the query for the slider, find Dynamic Slider > Slider Container > Repeater in the\nStructure Pane. You can then manipulate the Repeater via the Properties Pane.\n\nYou can add or remove dynamic data elements to the Repeater Div to change the leyout. Note that you'll\nonly see the first item in the builder preview, but on the front end all items matching the Repeater\nquery will be returned as slides.\n\n-->","code-css":"\n.oxel_dynamicslider__container {\n\twidth: 100%;\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tposition: relative;\n\toverflow: hidden;\n\tlist-style: none;\n\tpadding: 0;\n\tz-index: 1;\n}\n\n\n\n.oxel_dynamicslider{\n\twidth: 100%;\n\tposition: relative;\n}\n\n\n.swiper-slide {\n\t/* Center slide text vertically */\n\tdisplay: -webkit-box;\n\tdisplay: -ms-flexbox;\n\tdisplay: -webkit-flex;\n\tdisplay: flex;\n\t-webkit-box-pack: center;\n\t-ms-flex-pack: center;\n\t-webkit-justify-content: center;\n\tjustify-content: center;\n\t-webkit-box-align: center;\n\t-ms-flex-align: center;\n\t-webkit-align-items: center;\n\talign-items: center;\n}\n\n\n/*FOR INFINITE SCROLL\ndisable if not using infinite scroll\nto activate infinite scroll, set swiper \nspeed to high value e.g. 5000, \nautoplay delay to 0\n*/\n\n#swiper2 .swiper-wrapper{\n\t-webkit-transition-timing-function:linear!important;    \n\ttransition-timing-function:linear!important; \n\tposition: relative;\n}\n\n\n\n\n\n\n","code-js":"/* \n\n- CHANGE SLIDER HEIGHT ON SLIDER CONTAINER class/ID IN OXYGEN SETTINGS\n\n- SET 'AUTO HEIGHT TO TRUE TO IGNORE THE SLIDER HEIGHT VALUE'\n\n- DON'T SET LEFT AND RIGHT PADDINGS FOR THE SLIDER, TO SET SPACE ON LEFT AND RIGHT, SET THE SLIDE INNER WRAP'S MAX WIDTH, MARGIN LEFT AND RIGHT AUTO  \n\n- to have enough top and bottom space for the slider to scale without being cut off. set top and bottom padding on the repeater element (swiper wrapper)\n\n- To hide arrows, use the on:{} events to call the functions in the arrow and dots code, e.g. \t\n\n\t\t\ton: {\n\n\t\t\tinit: function() {\n\t\t\t\t\t hideArrowOnMobile();\n\t\t\t},\n\t\t\tresize: function () {\n\t\t\t\t\t hideArrowOnMobile();\n\t\t\t}\n  \t\t}\n\n\t\tYOU CAN FIND THE FUNCTIONS NAMES IN THE ARROW AND DOTES CODE BLOCK\n\n\t\t*/\n\ndocument.addEventListener('DOMContentLoaded', ()=>{ \n\t\n\tconst $ = document.querySelector.bind(document);\n\n\n\t// Initalize SwiperJS\n\n\tif( typeof Swiper == 'undefined' ) { return; }\n\n\t//start swiper\n\n\tlet prev1 = $('#swiper1 .swiper-button-prev'),\n\t\tnext1 = $('#swiper1 .swiper-button-next'),\n\t\tdot1 = $( '#swiper1 .swiper-pagination')\n\n\tvar swiper1 = new Swiper('#swiper1 .swiper-container', {\n\n\t\tpagination: {\n\t\t\tel: dot1,\n\t\t\tclickable: true,\n\t\t},\n\n\t\tnavigation: {\n\t\t\tprevEl: prev1,\n\t\t\tnextEl: next1,\n\t\t\t\n\t\t}, \n\t\t\n\t\t\ton: {\n\n\t\t\tinit: function() {\n\t\t\t\t\thideArrowOnMobile(prev1, next1);\n\t\t\t\t\thideDotsOnMobile(dot1)\n\t\t\t},\n\t\t\tresize: function () {\n\t\t\t\t\thideArrowOnMobile(prev1, next1);\n\t\t\t\t\thideDotsOnMobile(dot1)\n\t\t\t},\n  \t\t},\n\n\t\tgrabCursor: true,\n\t\tmousewheel: false,\n\t\tnoSwiping: false,\t\t\n\t\teffect: 'slide',  // 'fade'  'coverflow' 'flip' 'cube' 'cards'\n\t\tautoHeight: true,\n\t\tcenteredSlides: true,\n\t\tfreeMode: false,\n\t\tloop: true,\n\t\tspeed: 400,\n\t\t//watchSlidesProgress: true,\t\t\n\n\n\n\t\tkeyboard: {\n\t\t\tenabled: true,\n\t\t},\n\n\n\t\tautoplay: {\n\t\t\tdelay: 2500,\t\t\t\n\t\t\tpauseOnMouseEnter: true,\n\t\t\treverseDirection:false,\n\t\t},\t\n\n\n\t\t// breakpoints use min-width\n\t\tbreakpoints: {\n\n\t\t\t1200: {\n\t\t\t\tslidesPerView: 3,\n\t\t\t\tslidesPerGroup: 1,\n\t\t\t\tspaceBetween: 10,\n\n\t\t\t},\n\n\t\t\t640: {\n\t\t\t\tslidesPerView: 2,\n\t\t\t\tslidesPerGroup: 1,\n\t\t\t\tspaceBetween: 20,\n\t\t\t},\n\n\t\t\t380: {\n\t\t\t\tslidesPerView:1.2,\n\t\t\t\tslidesPerGroup: 1,\n\t\t\t\tspaceBetween: 15,\n\t\t\t},\n\n\t\t}, \n\n\t\t/*\n\t\ton: {\n\n\t\t\tinit: function() {\n\t\t\t\t\t hideArrowOnMobile(prev1, next1);\n\t\t\t},\n\t\t\tresize: function () {\n\t\t\t\t\t hideArrowOnMobile(prev1, next1);\n\t\t\t}\n  \t\t}\n\t\t*/\n\n\n\t});\n\n\t// end swiper\n\n\n\n\t//start swiper\n\n\tlet prev2 = $('#swiper2 .swiper-button-prev'),\t\n\t\tnext2 = $('#swiper2 .swiper-button-next'),\t\t\t\n\t\tdot2 = $( '#swiper2 .swiper-pagination')\n\n\tvar swiper2 = new Swiper('#swiper2 .swiper-container', {\n\n\t\ton: {\n\n\t\t\tinit: function() {\n\t\t\t\thideArrow(prev2, next2);\n\t\t\t\thideDots(dot2)\n\t\t\t},\n\t\t\tresize: function () {\n\t\t\t\thideArrow(prev2, next2);\n\t\t\t\thideDots(dot2)\n\t\t\t},\n\t\t},\n\n\n\n\n\t\tpagination: {\n\t\t\tel: dot2,\n\t\t\tclickable: false,\n\t\t},\n\n\t\tnavigation: {\n\t\t\tprevEl: prev2,\n\t\t\tnextEl: next2,\n\t\t\t\n\t\t},\n\n\t\tgrabCursor:false,\n\t\tmousewheel:false,\n\t\tnoSwiping:false,\t\t\n\t\teffect: 'coverflow',  // 'fade'  'coverflow' 'flip' 'cube' 'cards'\n\t\tautoHeight: false,\n\t\tcenteredSlides: true,\n\t\tfreeMode:false,\n\t\tloop: true,\n\t\tspeed: 7000,\t\n\t\t\n\t\t coverflowEffect: {\n       /* rotate: 0,\n        stretch: 80,\n        depth: 200,\n        modifier: 1,*/\n        slideShadows: false,\n    },\n\n\n\n\t\tkeyboard: {\n\t\t\tenabled: true,\n\t\t},\n\n\t\tautoplay: {\n\t\t\tdelay: 0,\t\t\t\n\t\t\tpauseOnMouseEnter: true,\n\t\t\treverseDirection:true,\n\t\t},\t\n\n\t\t/*\n\t\t thumbs: {\n          swiper: swiper1,\n        },\n\t\t*/\n\n\n\n\t\t// breakpoints use min-width\n\t\tbreakpoints: {\n\n\t\t\t1200: {\n\t\t\t\tslidesPerView: 2.5,\n\t\t\t\tslidesPerGroup: 1,\n\t\t\t\tspaceBetween: 25,\n\n\t\t\t},\n\n\t\t\t640: {\n\t\t\t\tslidesPerView: 2,\n\t\t\t\tslidesPerGroup: 1,\n\t\t\t\tspaceBetween: 20,\n\t\t\t},\n\n\t\t\t380: {\n\t\t\t\tslidesPerView:1.2,\n\t\t\t\tslidesPerGroup: 1,\n\t\t\t\tspaceBetween: 15,\n\n\n\t\t\t},\n\n\n\n\t\t}, \n\n\n\n\t});\n\n\t// end swiper\n\n\n\n\n\n\t//start swiper\n\n\tlet prev3 = $('#swiper3 .swiper-button-prev'),\t\n\t\tnext3 = $('#swiper3 .swiper-button-next'),\t\t\t\n\t\tdot3 = $( '#swiper3 .swiper-pagination')\n\n\tvar swiper3 = new Swiper('#swiper3 .swiper-container', {\n\n\t\tpagination: {\n\t\t\tel: dot3,\n\t\t\tclickable: true,\n\t\t},\n\n\t\tnavigation: {\n\t\t\tprevEl: prev3,\n\t\t\tnextEl: next3,\n\t\t\t\n\t\t},\n\n\t\tgrabCursor:false,\n\t\tmousewheel:false,\n\t\tnoSwiping:false,\t\t\n\t\teffect: 'fade',  // 'fade'  'coverflow' 'flip' 'cube' 'cards'\n\t\tautoHeight: false,\n\t\tcenteredSlides: true,\n\t\tfreeMode:false,\n\t\tloop: true,\n\t\tspeed: 600,\n\n\n\t\tkeyboard: {\n\t\t\tenabled: true,\n\t\t},\n\n\t\tautoplay: {\n\t\t\tdelay: 2000,\t\t\t\n\t\t\tpauseOnMouseEnter: true,\n\t\t\treverseDirection:true,\n\t\t},\t\n\n\n\t\t/*thumbs: {\n         swiper: swiper1,\n        },\n\n\t\t*/\n\n\n\t\t// breakpoints use min-width\n\t\tbreakpoints: {\n\n\t\t\t1200: {\n\t\t\t\tslidesPerView: 1,\n\t\t\t\tslidesPerGroup: 1,\n\t\t\t\tspaceBetween: 10,\n\n\t\t\t},\n\n\t\t\t640: {\n\t\t\t\tslidesPerView: 1,\n\t\t\t\tslidesPerGroup: 1,\n\t\t\t\tspaceBetween: 20,\n\t\t\t},\n\n\t\t\t380: {\n\t\t\t\tslidesPerView:1,\n\t\t\t\tslidesPerGroup: 1,\n\t\t\t\tspaceBetween: 15,\n\n\n\t\t\t},\n\n\n\n\t\t}, \n\n\n\n\n\n\n\n\t});\n\n\t// end swiper\n\t\n\t\n\t\n\t\n\t//start swiper\n\n\tlet prev4 = $('#swiper4 .swiper-button-prev'),\n\t\tnext4 = $('#swiper4 .swiper-button-next'),\n\t\tdot4 = $( '#swiper4 .swiper-pagination')\n\n\tvar swiper4 = new Swiper('#swiper4 .swiper-container', {\n\n\t\tpagination: {\n\t\t\tel: dot4,\n\t\t\tclickable: true,\n\t\t},\n\n\t\tnavigation: {\n\t\t\tprevEl: prev4,\n\t\t\tnextEl: next4,\n\t\t\t\n\t\t}, \n\t\t\n\t\t\ton: {\n\n\t\t\tinit: function() {\n\t\t\t\t\thideArrowOnMobile(prev4, next4);\n\t\t\t\t\thideDotsOnMobile(dot4)\n\t\t\t},\n\t\t\tresize: function () {\n\t\t\t\t\thideArrowOnMobile(prev4, next4);\n\t\t\t\t\thideDotsOnMobile(dot4)\n\t\t\t},\n  \t\t},\n\n\t\tgrabCursor: true,\n\t\tmousewheel: false,\n\t\tnoSwiping: false,\t\t\n\t\teffect: 'slide',  // 'fade'  'coverflow' 'flip' 'cube' 'cards'\n\t\tautoHeight: false,\n\t\tcenteredSlides: true,\n\t\tfreeMode: false,\n\t\tloop: true,\n\t\tspeed: 400,\n\t\t//watchSlidesProgress: true,\t\t\n\n\n\n\t\tkeyboard: {\n\t\t\tenabled: true,\n\t\t},\n\n\n\t\tautoplay: {\n\t\t\tdelay: 2500,\t\t\t\n\t\t\tpauseOnMouseEnter: true,\n\t\t\treverseDirection:false,\n\t\t},\t\n\n\n\t\t// breakpoints use min-width\n\t\tbreakpoints: {\n\n\t\t\t1200: {\n\t\t\t\tslidesPerView: 3,\n\t\t\t\tslidesPerGroup: 1,\n\t\t\t\tspaceBetween: 10,\n\n\t\t\t},\n\n\t\t\t640: {\n\t\t\t\tslidesPerView: 2,\n\t\t\t\tslidesPerGroup: 1,\n\t\t\t\tspaceBetween: 20,\n\t\t\t},\n\n\t\t\t380: {\n\t\t\t\tslidesPerView:1.2,\n\t\t\t\tslidesPerGroup: 1,\n\t\t\t\tspaceBetween: 15,\n\t\t\t},\n\n\t\t}, \n\n\t\t/*\n\t\ton: {\n\n\t\t\tinit: function() {\n\t\t\t\t\t hideArrowOnMobile(prev1, next1);\n\t\t\t},\n\t\t\tresize: function () {\n\t\t\t\t\t hideArrowOnMobile(prev1, next1);\n\t\t\t}\n  \t\t}\n\t\t*/\n\n\n\t});\n\n\t// end swiper\n\n\n\n\n});"},"nicename":"Dynamic Slider Code","activeselector":false,"ct_content":""},"depth":4},{"id":128,"name":"ct_div_block","options":{"ct_id":128,"ct_parent":78,"selector":"swiper3","classes":["oxel_dynamicslider"],"nicename":"Swiper3 - None Dynamic","activeselector":false,"original":{"margin-top-unit":"rem","margin-top":"0"}},"children":[{"id":129,"name":"ct_div_block","options":{"ct_id":129,"ct_parent":128,"selector":"div_block-129-150","nicename":"Slider Container - Swiper","classes":["oxel_dynamicslider__container","swiper-container"],"activeselector":"oxel_dynamicslider__container","original":{"height":"100","height-unit":"vh"}},"children":[{"id":180,"name":"ct_div_block","options":{"ct_id":180,"ct_parent":129,"selector":"div_block-180-150","original":{"image_type":"2","attachment_size":"full"},"nicename":"swiper wrapper","classes":["swiper-wrapper"],"activeselector":"swiper-wrapper"},"depth":6,"children":[{"id":181,"name":"ct_div_block","options":{"ct_id":181,"ct_parent":180,"selector":"div_block-181-150","original":{"image_type":"2","attachment_size":"full","background-image":"http://oxygen4alpha.local/wp-content/uploads/2022/04/michal-kubalczyk-WecngmAT-KY-unsplash.jpg","background-position-top-unit":"%","background-position-top":"50","background-position-left-unit":"%","background-position-left":"50","background-repeat":"no-repeat","gradient":{"colors":[{"position-unit":"%","value":"rgba(2,0,0,0)","position":"50"},{"position-unit":"%","value":"rgba(2,0,0,0.47)","position":"100"}]},"background-size":"cover","padding-left-unit":"rem","padding-right-unit":"rem","padding-left":"0","padding-right":"0"},"nicename":"Slide","classes":["swiper-slide"],"activeselector":false},"depth":7,"children":[{"id":187,"name":"ct_headline","options":{"ct_id":187,"ct_parent":181,"selector":"headline-187-150","original":{"image_type":"2","attachment_size":"full","color":"#ffffff","font-weight":"100","font-size":"calc(var(--text-xxl) * 2)","font-size-unit":" "},"nicename":"Heading (#187)","ct_content":"Slider 2.0","activeselector":false},"depth":8}]},{"id":184,"name":"ct_div_block","options":{"ct_id":184,"ct_parent":180,"selector":"div_block-184-150","original":{"image_type":"2","attachment_size":"full","background-image":"http://oxygen4alpha.local/wp-content/uploads/2022/04/anas-alshanti-feXpdV001o4-unsplash.jpg","background-position-top-unit":"%","background-position-top":"50","background-position-left-unit":"%","background-position-left":"50","background-repeat":"no-repeat","gradient":{"colors":[{"position-unit":"%","value":"rgba(2,0,0,0)","position":"50"},{"position-unit":"%","value":"rgba(2,0,0,0.82)","position":"100"}]},"background-size":"cover"},"nicename":"Slide","classes":["swiper-slide"],"activeselector":false},"depth":7,"children":[{"id":188,"name":"ct_headline","options":{"ct_id":188,"ct_parent":184,"selector":"headline-188-150","original":{"image_type":"2","attachment_size":"full","color":"#ffffff","font-weight":"100","font-size":"calc(var(--text-xxl) * 2)","font-size-unit":" "},"nicename":"Heading (#188)","ct_content":"Dynamic Slider"},"depth":8}]},{"id":185,"name":"ct_div_block","options":{"ct_id":185,"ct_parent":180,"selector":"div_block-185-150","original":{"image_type":"2","attachment_size":"full","background-image":"http://oxygen4alpha.local/wp-content/uploads/2022/04/fabio-oyXis2kALVg-unsplash.jpg","background-position-top-unit":"%","background-position-top":"50","background-position-left-unit":"%","background-position-left":"50","background-repeat":"no-repeat","gradient":{"colors":[{"position-unit":"%","value":"rgba(2,0,0,0)","position":"20"},{"position-unit":"%","value":"rgba(2,0,0,0.89)","position":"100"}]},"background-size":"cover"},"nicename":"Slide","classes":["swiper-slide"],"activeselector":false},"depth":7,"children":[{"id":189,"name":"ct_headline","options":{"ct_id":189,"ct_parent":185,"selector":"headline-189-150","original":{"image_type":"2","attachment_size":"full","color":"#ffffff","font-weight":"100","font-size":"calc(var(--text-xxl) * 2)","font-size-unit":" "},"nicename":"Heading (#189)","ct_content":"Slider 2.0"},"depth":8}]},{"id":186,"name":"ct_div_block","options":{"ct_id":186,"ct_parent":180,"selector":"div_block-186-150","original":{"image_type":"2","attachment_size":"full","background-image":"http://oxygen4alpha.local/wp-content/uploads/2022/04/lorenzo-herrera-p0j-mE6mGo4-unsplash.jpg","background-position-top-unit":"%","background-position-top":"50","background-position-left-unit":"%","background-position-left":"50","background-repeat":"no-repeat","gradient":{"colors":[{"position-unit":"%","value":"rgba(2,0,0,0)","position":"50"},{"position-unit":"%","value":"rgba(2,0,0,0.82)","position":"100"}]},"background-size":"cover"},"nicename":"Slide","classes":["swiper-slide"],"activeselector":false},"depth":7,"children":[{"id":190,"name":"ct_headline","options":{"ct_id":190,"ct_parent":186,"selector":"headline-190-150","original":{"image_type":"2","attachment_size":"full","color":"#ffffff","font-weight":"100","font-size":"calc(var(--text-xxl) * 2)","font-size-unit":" "},"nicename":"Heading (#190)","ct_content":"Normal Slider"},"depth":8}]}]}],"depth":5}],"depth":4},{"id":54,"name":"ct_div_block","options":{"ct_id":54,"ct_parent":78,"selector":"swiper1","classes":["oxel_dynamicslider"],"nicename":"Swiper1 - Dynamic","activeselector":false,"original":{"margin-top":"8","margin-top-unit":"rem","background-color":"#eff5f7"}},"children":[{"id":56,"name":"ct_div_block","options":{"ct_id":56,"ct_parent":54,"selector":"div_block-56-150","nicename":"Slider Container - Swiper","classes":["swiper-container","oxel_dynamicslider__container"],"activeselector":"oxel_dynamicslider__container","original":{"min-height-unit":"vh"}},"depth":5,"children":[{"id":57,"name":"oxy_dynamic_list","options":{"ct_id":57,"ct_parent":56,"selector":"_dynamic_list-57-150","original":{"query_post_types":["post"],"wp_query":"custom","paginate_size":"0","padding-top-unit":"rem","padding-bottom-unit":"rem","listrendertype":"1","padding-top":"3","padding-bottom":"5"},"classes":["swiper-wrapper"],"nicename":"Repeater - Swiper wrapper","activeselector":"swiper-wrapper"},"children":[{"id":58,"name":"ct_div_block","options":{"ct_id":58,"ct_parent":57,"selector":"div_block-58-150","original":{"background-imagedynamic":false,"background-size":"cover","background-position-left-unit":"%","background-position-left":"50","background-position-top-unit":"%","background-position-top":"50","padding-bottom-unit":"","padding-left-unit":"","padding-right-unit":"","padding-top-unit":"","padding-top":"0","border-radius":"40","gradient":{"colors":[],"gradient-type":"radial","radial-shape":"circle"},"background-color":"#ffffff","margin-top-unit":"rem","margin-bottom-unit":"rem","margin-top":"0","margin-bottom":"0","transform":[]},"classes":["swiper-slide"],"activeselector":false,"nicename":"Slide"},"children":[{"id":79,"name":"ct_div_block","options":{"ct_id":79,"ct_parent":58,"selector":"div_block-79-150","original":{"width":"100","width-unit":"%","max-width":"90","max-width-unit":"%","margin-right-unit":"auto","margin-right":"0","margin-left-unit":"auto","margin-left":"0","padding-top":"var(--space-m)","padding-top-unit":" ","padding-bottom":"var(--space-m)","padding-bottom-unit":" ","text-align":"left","align-items":"center","margin-top-unit":"rem","margin-bottom-unit":"rem","margin-top":"0","margin-bottom":"0"},"nicename":"slide inner wrap"},"depth":8,"children":[{"id":82,"name":"ct_image","options":{"ct_id":82,"ct_parent":79,"selector":"image-82-150","original":{"image_type":"1","attachment_size":"full","src":"[oxygen ct_sign_sha256='90405c76678516ecfe3135a63a8de8e50b79918f901d0c9b610595cf6a08c30e' data='featured_image' ]","srcdynamic":true,"height-unit":"auto","height":"","border-radius":"20","margin-bottom":"13","width":"300"},"nicename":"Image (#82)","activeselector":false},"depth":9},{"id":59,"name":"ct_headline","options":{"ct_id":59,"ct_parent":79,"selector":"headline-59-150","original":{"margin-bottom":"32","color":"#01477a","font-size":"27","line-height":"1.2"},"activeselector":"","ct_content":"<span id=\"ct-placeholder-60\"></span>","nicename":"Heading (#59)"},"children":[{"id":60,"name":"ct_span","options":{"ct_id":60,"ct_parent":59,"selector":"span-60-150","ct_content":"[oxygen ct_sign_sha256='97aadb60ead58c336287c63b9e4a8d9ce6e4d372bf417127595982fdb4c4c33c' data='title' ]","nicename":"Span (#60)"},"depth":10}],"depth":9}]}],"depth":7}],"depth":6}]}],"depth":4},{"id":62,"name":"ct_div_block","options":{"ct_id":62,"ct_parent":78,"selector":"swiper2","classes":["oxel_dynamicslider"],"nicename":"Swiper2 - Dynamic infinite","activeselector":false,"original":{"margin-top":"20","margin-top-unit":"rem","margin-bottom":"20","margin-bottom-unit":"rem"}},"children":[{"id":64,"name":"ct_div_block","options":{"ct_id":64,"ct_parent":62,"selector":"div_block-64-150","nicename":"Slider Container - Swiper","classes":["oxel_dynamicslider__container","swiper-container"],"activeselector":"oxel_dynamicslider__container","original":{"min-height-unit":"vh","height":"600"}},"children":[{"id":65,"name":"oxy_dynamic_list","options":{"ct_id":65,"ct_parent":64,"selector":"_dynamic_list-65-150","original":{"query_post_types":["post"],"wp_query":"custom","paginate_size":"0","listrendertype":"1","padding-top":"3","padding-top-unit":"rem","padding-bottom":"3","padding-bottom-unit":"rem"},"classes":["swiper-wrapper"],"nicename":"Repeater - Swiper wrapper","activeselector":false},"children":[{"id":66,"name":"ct_div_block","options":{"ct_id":66,"ct_parent":65,"selector":"div_block-66-150","original":{"background-image":"[oxygen ct_sign_sha256='90405c76678516ecfe3135a63a8de8e50b79918f901d0c9b610595cf6a08c30e' data='featured_image' ]","background-imagedynamic":true,"background-size":"cover","background-position-left-unit":"%","background-position-left":"50","background-position-top-unit":"%","background-position-top":"50","overlay-color":"rgba(55,64,71,0.3)","border-radius":"40"},"classes":["swiper-slide"],"activeselector":false,"nicename":"Slide"},"children":[{"id":67,"name":"ct_headline","options":{"ct_id":67,"ct_parent":66,"selector":"headline-67-150","original":{"margin-bottom":"32","color":"#ffffff","font-size":"29"},"ct_content":"<span id=\"ct-placeholder-68\"></span>","nicename":"Heading (#59)"},"children":[{"id":68,"name":"ct_span","options":{"ct_id":68,"ct_parent":67,"selector":"span-68-150","ct_content":"[oxygen ct_sign_sha256='97aadb60ead58c336287c63b9e4a8d9ce6e4d372bf417127595982fdb4c4c33c' data='title' ]","nicename":"Span (#60)"},"depth":9}],"depth":8},{"id":69,"name":"ct_link_button","options":{"ct_id":69,"ct_parent":66,"selector":"link_button-69-150","original":{"button-color":"#374047","button-text-color":"#ffffff","url":"[oxygen ct_sign_sha256='e1e8cf07e52a0e8fdeb94ef909d267735a58fa7a5e580a86ac65e237333c9f75' data='permalink' ]","url_encoded":"true"},"ct_content":"Read More","nicename":"Button (#61)"},"depth":8}],"depth":7}],"depth":6}],"depth":5}],"depth":4}]}]},"classes":{"oxel_dynamicslider":{"key":"oxel_dynamicslider","parent":"composite-elements","original":{"width-unit":"%","width":"100"}},"oxel_dynamicslider__container":{"key":"oxel_dynamicslider__container","parent":"composite-elements","original":{"height":"600"}},"swiper-container":{"key":"swiper-container","parent":"composite-elements","original":{"selector-locked":"true"}},"swiper-wrapper":{"key":"swiper-wrapper","parent":"composite-elements","original":{"flex-direction":"row","display":"flex"}},"swiper-slide":{"key":"swiper-slide","parent":"composite-elements","original":{"selector-locked":"true"}}}}