API tools faq
paste
Udoro

Non Dynamic Slider with coverflow effect

Udoro
May 18th, 2023
27
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.13 KB | None | 0 0
raw download clone embed print report
  1. {"component":{"id":80,"name":"ct_section","options":{"ct_id":80,"ct_parent":100027,"selector":"section-80-2","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-unit":"rem"},"nicename":"Sliders section","activeselector":false},"depth":2,"children":[{"id":81,"name":"ct_div_block","options":{"ct_id":81,"ct_parent":80,"selector":"div_block-81-2","original":{"width-unit":"%","width":"100"},"nicename":"Slider Overall wrapper","activeselector":""},"depth":3,"children":[{"id":82,"name":"ct_code_block","options":{"ct_id":82,"ct_parent":81,"selector":"code_block-82-2","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: 105%;\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/* SLIDES */\n\n/*slide style*/\nbody:not(.ng-scope) #swiper1 .swiper-slide {\t\n\topacity: 0.5;\n\n\t\n}\n\n\n\n/*active slide style*/\nbody:not(.ng-scope) #swiper1 .swiper-slide-active {\n\t\n\topacity: 1;\n\n}\n\nbody:not(.ng-scope) #swiper1 .slide__title-wrap{\n\topacity: 0;\n\ttransition: 0.6s\n}\n\n\nbody:not(.ng-scope) #swiper1 .swiper-slide-active .slide__title-wrap{\n\t\n\topacity: 1;\n\n}\n\n\n\n\n\n\n"},"nicename":"Arrow and Dots code","activeselector":false},"depth":4},{"id":83,"name":"ct_code_block","options":{"ct_id":83,"ct_parent":81,"selector":"code_block-83-2","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\thideDots(dot1)\n\t\t\t},\n\t\t\tresize: function () {\n\t\t\t\t\thideArrowOnMobile(prev1, next1);\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,\n\t\tautoHeight: true,\n\t\tcenteredSlides: true,\n\t\tfreeMode: false,\n\t\tloop: true,\n\t\tspeed: 600,\n\t\teffect: 'coverflow', // 'fade' 'coverflow' 'flip' 'cube' 'cards'\t\t\t\n\t\t\n\t\tcoverflowEffect: {\n \t\trotate: 0,\n\t\tscale: 0.8,\n \tslideShadows: false,\n },\n\n\n\n\t\tkeyboard: {\n\t\t\tenabled: true,\n\t\t},\n\t\t\n\t\t hashNavigation: {\n watchState: true,\n },\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: 4,\n\t\t\t\tslidesPerGroup: 1,\n\t\t\t\tspaceBetween: 50,\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\n\t});\n\n\t// end swiper\n\n\n\n\n});"},"nicename":"Dynamic Slider Code","activeselector":false,"ct_content":""},"depth":4},{"id":84,"name":"ct_div_block","options":{"ct_id":84,"ct_parent":81,"selector":"swiper1","classes":["oxel_dynamicslider"],"nicename":"Swiper1 - None Dynamic","activeselector":false,"original":{"margin-top-unit":"rem","margin-top":"0"}},"children":[{"id":85,"name":"ct_div_block","options":{"ct_id":85,"ct_parent":84,"selector":"div_block-85-2","nicename":"Slider Container - Swiper","classes":["oxel_dynamicslider__container","swiper-container"],"activeselector":false,"original":{"height-unit":"auto"}},"children":[{"id":86,"name":"ct_div_block","options":{"ct_id":86,"ct_parent":85,"selector":"div_block-86-2","original":{"image_type":"2","attachment_size":"full","custom-css":"transform-style: preserve-3d;"},"nicename":"swiper wrapper","classes":["swiper-wrapper"],"activeselector":"swiper-wrapper"},"depth":6,"children":[{"id":125,"name":"ct_div_block","options":{"ct_id":125,"ct_parent":86,"selector":"div_block-125-2","original":{"image_type":"2","attachment_size":"full","background-position-top-unit":"%","background-position-top":"50","background-position-left-unit":"%","background-position-left":"50","background-repeat":"no-repeat","gradient":{"colors":[]},"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":126,"name":"ct_image","options":{"ct_id":126,"ct_parent":125,"selector":"image-126-2","original":{"image_type":"2","attachment_size":"full","attachment_id":105,"attachment_height":691,"attachment_width":431,"attachment_url":"https://oxytuts.designwithcracka.com/wp-content/uploads/2023/04/Mask-Group-4.jpg"},"nicename":"Image (#117)","activeselector":false},"depth":8},{"id":139,"name":"ct_div_block","options":{"ct_id":139,"ct_parent":125,"selector":"div_block-139-2","original":{"tag":"div","text-align":"left","align-items":"center","gap":"20"},"nicename":"Div (#139)","classes":["slide__title-wrap"],"activeselector":"slide__title-wrap"},"depth":8,"children":[{"id":140,"name":"ct_link_button","options":{"ct_id":140,"ct_parent":139,"selector":"link_button-140-2","original":{},"nicename":"Button (#140)","ct_content":"btn"},"depth":9},{"id":141,"name":"ct_headline","options":{"ct_id":141,"ct_parent":139,"selector":"headline-141-2","original":{"tag":"h3"},"nicename":"Heading (#141)","ct_content":"title","activeselector":false},"depth":9}]}]},{"id":127,"name":"ct_div_block","options":{"ct_id":127,"ct_parent":86,"selector":"div_block-127-2","original":{"image_type":"2","attachment_size":"full","background-position-top-unit":"%","background-position-top":"50","background-position-left-unit":"%","background-position-left":"50","background-repeat":"no-repeat","gradient":{"colors":[]},"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":128,"name":"ct_image","options":{"ct_id":128,"ct_parent":127,"selector":"image-128-2","original":{"image_type":"2","attachment_size":"full","attachment_id":105,"attachment_height":691,"attachment_width":431,"attachment_url":"https://oxytuts.designwithcracka.com/wp-content/uploads/2023/04/Mask-Group-4.jpg"},"nicename":"Image (#117)","activeselector":false},"depth":8},{"id":145,"name":"ct_div_block","options":{"ct_id":145,"ct_parent":127,"selector":"div_block-145-2","original":{"tag":"div","text-align":"left","align-items":"center","gap":"20"},"nicename":"Div (#145)","classes":["slide__title-wrap"]},"depth":8,"children":[{"id":146,"name":"ct_link_button","options":{"ct_id":146,"ct_parent":145,"selector":"link_button-146-2","original":{},"nicename":"Button (#140)","ct_content":"btn"},"depth":9},{"id":147,"name":"ct_headline","options":{"ct_id":147,"ct_parent":145,"selector":"headline-147-2","original":{"tag":"h3"},"nicename":"Heading (#141)","ct_content":"title","activeselector":false},"depth":9}]}]},{"id":129,"name":"ct_div_block","options":{"ct_id":129,"ct_parent":86,"selector":"div_block-129-2","original":{"image_type":"2","attachment_size":"full","background-position-top-unit":"%","background-position-top":"50","background-position-left-unit":"%","background-position-left":"50","background-repeat":"no-repeat","gradient":{"colors":[]},"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":130,"name":"ct_image","options":{"ct_id":130,"ct_parent":129,"selector":"image-130-2","original":{"image_type":"2","attachment_size":"full","attachment_id":105,"attachment_height":691,"attachment_width":431,"attachment_url":"https://oxytuts.designwithcracka.com/wp-content/uploads/2023/04/Mask-Group-4.jpg"},"nicename":"Image (#117)"},"depth":8},{"id":149,"name":"ct_div_block","options":{"ct_id":149,"ct_parent":129,"selector":"div_block-149-2","original":{"tag":"div","text-align":"left","align-items":"center","gap":"20"},"nicename":"Div (#149)","classes":["slide__title-wrap"]},"depth":8,"children":[{"id":150,"name":"ct_link_button","options":{"ct_id":150,"ct_parent":149,"selector":"link_button-150-2","original":{},"nicename":"Button (#140)","ct_content":"btn"},"depth":9},{"id":151,"name":"ct_headline","options":{"ct_id":151,"ct_parent":149,"selector":"headline-151-2","original":{"tag":"h3"},"nicename":"Heading (#141)","ct_content":"title","activeselector":false},"depth":9}]}]},{"id":131,"name":"ct_div_block","options":{"ct_id":131,"ct_parent":86,"selector":"div_block-131-2","original":{"image_type":"2","attachment_size":"full","background-position-top-unit":"%","background-position-top":"50","background-position-left-unit":"%","background-position-left":"50","background-repeat":"no-repeat","gradient":{"colors":[]},"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":132,"name":"ct_image","options":{"ct_id":132,"ct_parent":131,"selector":"image-132-2","original":{"image_type":"2","attachment_size":"full","attachment_id":105,"attachment_height":691,"attachment_width":431,"attachment_url":"https://oxytuts.designwithcracka.com/wp-content/uploads/2023/04/Mask-Group-4.jpg"},"nicename":"Image (#117)"},"depth":8},{"id":153,"name":"ct_div_block","options":{"ct_id":153,"ct_parent":131,"selector":"div_block-153-2","original":{"tag":"div","text-align":"left","align-items":"center","gap":"20"},"nicename":"Div (#153)","classes":["slide__title-wrap"]},"depth":8,"children":[{"id":154,"name":"ct_link_button","options":{"ct_id":154,"ct_parent":153,"selector":"link_button-154-2","original":{},"nicename":"Button (#140)","ct_content":"btn"},"depth":9},{"id":155,"name":"ct_headline","options":{"ct_id":155,"ct_parent":153,"selector":"headline-155-2","original":{"tag":"h3"},"nicename":"Heading (#141)","ct_content":"title","activeselector":false},"depth":9}]}]},{"id":135,"name":"ct_div_block","options":{"ct_id":135,"ct_parent":86,"selector":"div_block-135-2","original":{"image_type":"2","attachment_size":"full","background-position-top-unit":"%","background-position-top":"50","background-position-left-unit":"%","background-position-left":"50","background-repeat":"no-repeat","gradient":{"colors":[]},"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":136,"name":"ct_image","options":{"ct_id":136,"ct_parent":135,"selector":"image-136-2","original":{"image_type":"2","attachment_size":"full","attachment_id":105,"attachment_height":691,"attachment_width":431,"attachment_url":"https://oxytuts.designwithcracka.com/wp-content/uploads/2023/04/Mask-Group-4.jpg"},"nicename":"Image (#117)"},"depth":8},{"id":157,"name":"ct_div_block","options":{"ct_id":157,"ct_parent":135,"selector":"div_block-157-2","original":{"tag":"div","text-align":"left","align-items":"center","gap":"20"},"nicename":"Div (#157)","classes":["slide__title-wrap"]},"depth":8,"children":[{"id":158,"name":"ct_link_button","options":{"ct_id":158,"ct_parent":157,"selector":"link_button-158-2","original":{},"nicename":"Button (#140)","ct_content":"btn"},"depth":9},{"id":159,"name":"ct_headline","options":{"ct_id":159,"ct_parent":157,"selector":"headline-159-2","original":{"tag":"h3"},"nicename":"Heading (#141)","ct_content":"title","activeselector":false},"depth":9}]}]},{"id":137,"name":"ct_div_block","options":{"ct_id":137,"ct_parent":86,"selector":"div_block-137-2","original":{"image_type":"2","attachment_size":"full","background-position-top-unit":"%","background-position-top":"50","background-position-left-unit":"%","background-position-left":"50","background-repeat":"no-repeat","gradient":{"colors":[]},"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":138,"name":"ct_image","options":{"ct_id":138,"ct_parent":137,"selector":"image-138-2","original":{"image_type":"2","attachment_size":"full","attachment_id":105,"attachment_height":691,"attachment_width":431,"attachment_url":"https://oxytuts.designwithcracka.com/wp-content/uploads/2023/04/Mask-Group-4.jpg"},"nicename":"Image (#117)"},"depth":8},{"id":161,"name":"ct_div_block","options":{"ct_id":161,"ct_parent":137,"selector":"div_block-161-2","original":{"tag":"div","text-align":"left","align-items":"center","gap":"20"},"nicename":"Div (#161)","classes":["slide__title-wrap"]},"depth":8,"children":[{"id":162,"name":"ct_link_button","options":{"ct_id":162,"ct_parent":161,"selector":"link_button-162-2","original":{},"nicename":"Button (#140)","ct_content":"btn"},"depth":9},{"id":163,"name":"ct_headline","options":{"ct_id":163,"ct_parent":161,"selector":"headline-163-2","original":{"tag":"h3"},"nicename":"Heading (#141)","ct_content":"title","activeselector":false},"depth":9}]}]}]}],"depth":5}],"depth":4}]}]},"classes":{"oxel_dynamicslider":{"key":"oxel_dynamicslider","original":{"width-unit":"%","width":"100"}},"oxel_dynamicslider__container":{"key":"oxel_dynamicslider__container","original":{"height":"600"}},"swiper-container":{"key":"swiper-container","original":{"selector-locked":"true"}},"swiper-wrapper":{"key":"swiper-wrapper","original":{"flex-direction":"row","display":"flex"}},"swiper-slide":{"key":"swiper-slide","original":{"max-width-unit":"px","selector-locked":"false"}},"slide__title-wrap":{"original":{"margin-top":"4","margin-top-unit":"rem"},"key":"slide__title-wrap"}}}
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!