API tools faq
paste
Udoro

Oxygen Dynamic Sync Sliders

Udoro
Nov 19th, 2022 (edited)
267
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.68 KB | None | 0 0
raw download clone embed print report
  1. {"component":{"id":34,"name":"ct_section","options":{"ct_id":34,"ct_parent":100004,"selector":"section-34-298","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":35,"name":"ct_div_block","options":{"ct_id":35,"ct_parent":34,"selector":"div_block-35-298","original":{"width-unit":"%","width":"100"},"nicename":"Slider Overall wrapper"},"depth":3,"children":[{"id":36,"name":"ct_code_block","options":{"ct_id":36,"ct_parent":35,"selector":"code_block-36-298","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: #fff;\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/*-----MAIN SLIDER------*/\n\n/* ARROWS */\n/*arrow type\n\n#main_slider .swiper-button-prev::after, \n#main_slider .swiper-container-rtl .swiper-button-next::after {\n\tcontent: '\\21CB';\t\n}\n\n\n#main_slider .swiper-button-next::after, \n#main_slider .swiper-container-rtl .swiper-button-prev::after{\n\tcontent: '\\21CC';\n\t\n}\n\n/*arrow position*/\n#main_slider .swiper-button-next, \n#main_slider .swiper-button-prev {\n \n bottom: 40px;\n\ttop: auto;\n\tdisplay: flex !important;\n}\n\n#main_slider .swiper-button-next {\n \n right: calc(50% - 162px)\n}\n\n#main_slider .swiper-button-prev{\n \n left: calc(50% - 162px)\n}\n\n\n\n/* DOTS */\n\n\n/* SLIDES */\n\n/*slide style*/\n\n\n/*active slide style*/\n\n\n\n\n\n\n\n\n\n\n\n/*-----THUMBNAIL-----*/\n\n\n\n/* SLIDES */\n\n/*normal slider*/\n\n#thumbnail .swiper-slide {\n opacity: 0.4;\n\tscale: 0.9;\n\ttransition: opacity 0.4s, scale 0.6s;\n }\n\n/*active slide*/\n\n#thumbnail .swiper-slide-thumb-active {\n opacity: 1;\n\tscale: 1;\n\t\n }\n\n\n\n"},"nicename":"Arrow and Dots code","activeselector":false},"depth":4},{"id":37,"name":"ct_code_block","options":{"ct_id":37,"ct_parent":35,"selector":"code_block-37-298","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\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\t\n\n\n\t// Initalize SwiperJS\n\n\tif( typeof Swiper == 'undefined' ) { return; }\t\n\n\n\n\t//start swiper\n\n\tlet prev2 = $('#thumbnail .swiper-button-prev'),\t\n\t\tnext2 = $('#thumbnail .swiper-button-next'),\t\t\t\n\t\tdot2 = $( '#thumbnail .swiper-pagination')\n\n\tvar Thumbnail = new Swiper('#thumbnail .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: 'slide', \n\t\tautoHeight: false,\n\t\tcenteredSlides: true,\n\t\tfreeMode:true,\n\t\tloop: true,\n\t\twatchSlidesProgress: true,\t\n\n\n\t\tkeyboard: {\n\t\t\tenabled: true,\n\t\t},\n\n\t\t\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: 4,\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.5,\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\t\n\t\n\t//start swiper\n\n\tlet prev1 = $('#main_slider .swiper-button-prev'),\n\t\tnext1 = $('#main_slider .swiper-button-next'),\n\t\tdot1 = $( '#main_slider .swiper-pagination')\n\n\tvar MainSlider = new Swiper('#main_slider .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\t\n\t\t\t\t\thideDots(dot1)\n\t\t\t},\n\t\t\tresize: function () {\n\t\t\t\t\t\n\t\t\t\t\thideDots(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: false,\n\t\tcenteredSlides: true,\n\t\tfreeMode: false,\n\t\tloop: true,\n\t\tspeed: 400,\t\n\t\t\n\t\tthumbs: {\n swiper: Thumbnail,\n },\n\n\n\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: 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.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\t\n\t\n\t\n\n\n\n\n\n});"},"nicename":"Dynamic Slider Code","activeselector":false,"ct_content":""},"depth":4},{"id":38,"name":"ct_div_block","options":{"ct_id":38,"ct_parent":35,"selector":"main_slider","classes":["oxel_dynamicslider","main-slider"],"nicename":"MainSlider - Dynamic","activeselector":false,"original":{"margin-top-unit":"rem","background-color":"#eff5f7","max-width":"960","margin-left-unit":"auto","margin-right-unit":"auto"}},"children":[{"id":39,"name":"ct_div_block","options":{"ct_id":39,"ct_parent":38,"selector":"div_block-39-298","nicename":"Slider Container - Swiper","classes":["swiper-container","oxel_dynamicslider__container"],"activeselector":false,"original":{"min-height":"600"}},"depth":5,"children":[{"id":40,"name":"oxy_dynamic_list","options":{"ct_id":40,"ct_parent":39,"selector":"_dynamic_list-40-298","original":{"query_post_types":["post"],"wp_query":"custom","paginate_size":"0","padding-top-unit":"rem","padding-bottom-unit":"rem","listrendertype":"1"},"classes":["swiper-wrapper"],"nicename":"Repeater - Swiper wrapper","activeselector":false},"children":[{"id":41,"name":"ct_div_block","options":{"ct_id":41,"ct_parent":40,"selector":"div_block-41-298","original":{"padding-bottom-unit":"","padding-top-unit":"rem","background-imagedynamic":true,"background-size":"cover","background-position-left-unit":"%","background-position-left":"50","background-position-top-unit":"%","background-position-top":"50","padding-left-unit":"","padding-right-unit":"","gradient":{"colors":[],"gradient-type":"radial","radial-shape":"circle"},"background-color":"#ffffff","margin-top-unit":"rem","margin-bottom-unit":"rem","transform":[],"background-image":"[oxygen ct_sign_sha256='90405c76678516ecfe3135a63a8de8e50b79918f901d0c9b610595cf6a08c30e' data='featured_image' ]","min-height-unit":"vh"},"classes":["swiper-slide"],"activeselector":false,"nicename":"Slide"},"children":[{"id":42,"name":"ct_div_block","options":{"ct_id":42,"ct_parent":41,"selector":"div_block-42-298","original":{"padding-top-unit":"rem","padding-bottom-unit":"rem","margin-top-unit":"rem","margin-bottom-unit":"rem","margin-top":"0","margin-bottom":"0","width":"100","width-unit":"%","max-width":"90","max-width-unit":"%","margin-right-unit":"auto","margin-right":"0","margin-left-unit":"auto","margin-left":"0","text-align":"left","align-items":"center"},"nicename":"slide inner wrap"},"depth":8,"children":[{"id":43,"name":"ct_headline","options":{"ct_id":43,"ct_parent":42,"selector":"headline-43-298","original":{"margin-bottom":"32","color":"#ffffff","font-size":"27","line-height":"1.2"},"ct_content":"<span id=\"ct-placeholder-44\"></span>","nicename":"Heading (#59)"},"children":[{"id":44,"name":"ct_span","options":{"ct_id":44,"ct_parent":43,"selector":"span-44-298","ct_content":"[oxygen ct_sign_sha256='97aadb60ead58c336287c63b9e4a8d9ce6e4d372bf417127595982fdb4c4c33c' data='title' ]","nicename":"Span (#60)"},"depth":10}],"depth":9}]}],"depth":7}],"depth":6}]}],"depth":4},{"id":45,"name":"ct_div_block","options":{"ct_id":45,"ct_parent":35,"selector":"thumbnail","classes":["oxel_dynamicslider","thumbnail"],"nicename":"Thumbnail - Dynamic","activeselector":false,"original":{"margin-top-unit":"rem","max-width":"960","margin-left-unit":"auto","margin-right-unit":"auto"}},"children":[{"id":46,"name":"ct_div_block","options":{"ct_id":46,"ct_parent":45,"selector":"div_block-46-298","nicename":"Slider Container - Swiper","classes":["swiper-container","oxel_dynamicslider__container"],"original":{"min-height-unit":"vh","max-height":"200"}},"depth":5,"children":[{"id":47,"name":"oxy_dynamic_list","options":{"ct_id":47,"ct_parent":46,"selector":"_dynamic_list-47-298","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":false},"children":[{"id":48,"name":"ct_div_block","options":{"ct_id":48,"ct_parent":47,"selector":"div_block-48-298","original":{"background-imagedynamic":true,"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":"20","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":[],"background-image":"[oxygen ct_sign_sha256='90405c76678516ecfe3135a63a8de8e50b79918f901d0c9b610595cf6a08c30e' data='featured_image' ]","custom-css":"cursor: pointer;"},"classes":["swiper-slide"],"nicename":"Slide","activeselector":""},"depth":7}],"depth":6}]}],"depth":4}]}]},"classes":{"oxel_dynamicslider":{"key":"oxel_dynamicslider","parent":"composite-elements","original":{"width-unit":"%","width":"100"}},"main-slider":{"original":{},"key":"main-slider"},"swiper-container":{"key":"swiper-container","parent":"composite-elements","original":{"selector-locked":"true"}},"oxel_dynamicslider__container":{"key":"oxel_dynamicslider__container","parent":"composite-elements","original":{"height":"600"}},"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"}},"thumbnail":{"original":{},"key":"thumbnail"}}}
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!