Slider Swiper OXYGEN

gistfile1.txt

{"component":{"id":2,"name":"ct_section","options":{"ct_id":2,"ct_parent":100017,"selector":"section-2-67","original":{"section-width":"full-width","container-padding-top":"0","container-padding-right":"0","container-padding-bottom":"0","container-padding-left":"0"},"nicename":"Section (#2)","activeselector":false,"media":{"phone-portrait":{"original":{"overflow":"hidden"}}}},"depth":3,"children":[{"id":46,"name":"ct_div_block","options":{"ct_id":46,"ct_parent":2,"selector":"div_block-46-67","original":{"width":"100","width-unit":"%","max-width":"100","max-width-unit":"%"},"nicename":"Slider"},"depth":4,"children":[{"id":47,"name":"ct_code_block","options":{"ct_id":47,"ct_parent":46,"selector":"code_block-47-67","original":{"code-js":"document.addEventListener('DOMContentLoaded', function() {\n\n\tconst delay = 5000; \n\tconst effect = \"slide\";\n\n\tfunction updateSliderBar() {\n\t\tconst sliderBar = document.querySelector('.c-slider-classic-bar');\n\t\tsliderBar.style.transition = `width 0ms linear`; \n\t\tsliderBar.style.width = '0%'; \n\t\tvoid sliderBar.offsetWidth;\n\t\tsliderBar.style.transition = `width ${delay}ms linear`; \n\t\tsliderBar.style.width = '100%';\n\t}\n\n\tconst sliderContainer = document.querySelector('.c-slider-classic-play');\n\tconst sliderBar = document.querySelector('.c-slider-classic-bar');\n\tlet isPaused = false;\n\n\t//Control Manual\n\tconst swiper = new Swiper('.c-slider-classic', {\n\t\tloop: true,\n\t\teffect: effect,\n\t\tautoplay: {\n\t\t\tdelay: delay, //Delay Animations\n\t\t\tdisableOnInteraction: false,\n\t\t},\n\n\t\tpagination: {\n\t\t\tel: '.c-slider-classic-pagination',\n\t\t\tclickable: true,\n\t\t},\n\n\t\tnavigation: {\n\t\t\tnextEl: '.c-slider-classic-next',\n\t\t\tprevEl: '.c-slider-classic-prev',\n\t\t},\n\t\ton: {\n\t\t\tslideChange: updateSliderBar,\n\t\t},\n\t});\n\n\tupdateSliderBar();\n\n\tfunction toggleSliderPlay() {\n\t\tif (isPaused) {\n\t\t\tswiper.autoplay.start();\n\t\t\tsliderBar.style.animationPlayState = 'running';\n\t\t\tsliderBar.style.visibility = 'visible';\n\t\t\tsliderBar.style.width = '0%';\n\t\t\tsliderBar.style.transition = 'width 0ms linear';\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tsliderBar.style.width = '100%';\n\t\t\t\tsliderBar.style.transition = `width ${delay - 200}ms linear`;\n\t\t\t}, 10);\n\n\t\t} else {\n\t\t\tswiper.autoplay.stop();\n\t\t\tsliderBar.style.animationPlayState = 'paused';\n\t\t\tsliderBar.style.width = '0%';\n\t\t\tsliderBar.style.transition = 'width 0ms linear';\n\t\t\tsliderBar.style.visibility = 'hidden';\n\t\t}\n\t\tisPaused = !isPaused;\n\t\tsliderContainer.classList.toggle('paused', isPaused);\n\t}\n\n\n\tsliderContainer.addEventListener('click', toggleSliderPlay);\n});","code-php":"<!--\n\n\nfunction agregar_estilos_y_scripts() {\n    if (!is_admin()) {\n        wp_enqueue_style('swiper-styles', 'https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css');\n\n        wp_enqueue_script('swiper-script', 'https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js', array(), false, true);\n    }\n}\nadd_action('wp_enqueue_scripts', 'agregar_estilos_y_scripts');\n\n\n\n-->","code-css":".c-slider-classic .swiper-pagination-bullet {\n    width: 35px;\n    height: 10px;\n    border-radius: 100px;\n}\n\n.c-slider-classic .swiper-pagination-bullet-active {\n    background-color: #594cbf;\n}\n\n.c-slider-classic-play.paused .c-slider-icon-play {\n\ttransform: scale3d(1,1,1);\n}\n\n.c-slider-classic-play.paused .c-slider-icon-paused  {\n\ttransform: scale3d(0,0,0);\n}\n\n\n.c-shop.slider-active .c-shop-slider {\n\topacity: 1;\n}\n\n.c-shop.slider-active .c-shop-image {\n   transition-delay: 0.5s;\n\tvisibility: hidden;\n}\n\n\n.c-shop.slider-active .c-shop-next,\n.c-shop.slider-active .c-shop-prev{\n\topacity: 1;\n}"},"nicename":"Code Slider Classic","activeselector":false},"depth":5},{"id":40,"name":"ct_div_block","options":{"ct_id":40,"ct_parent":46,"selector":"div_block-40-67","original":[],"nicename":"Slider swiper","classes":["swiper","c-slider-classic"],"activeselector":"swiper"},"depth":5,"children":[{"id":42,"name":"ct_div_block","options":{"ct_id":42,"ct_parent":40,"selector":"div_block-42-67","original":{"min-height-unit":" ","height":"100","text-align":"left","display":"flex","height-unit":"auto"},"nicename":"Slider Wrap swiper-wrapper","classes":["swiper-wrapper"],"activeselector":false},"depth":6,"children":[{"id":43,"name":"ct_div_block","options":{"ct_id":43,"ct_parent":42,"selector":"div_block-43-67","original":{"background-image":"https://shop.reyescode.com/wp-content/uploads/2023/07/curly_hair_girl-1.webp","conditionspreview":"0","globalConditionsResult":false},"nicename":"SLIDER swiper-slide","classes":["swiper-slide","c-slider-classic-slide"],"activeselector":"c-slider-classic-slide"},"depth":7,"children":[{"id":113,"name":"ct_div_block","options":{"ct_id":113,"ct_parent":43,"selector":"div_block-113-67","original":{"width":"100","width-unit":"%","max-width":"980","margin-left-unit":"auto","margin-right-unit":"auto","display":"flex","align-items":"flex-start"},"nicename":"Div (#113)"},"depth":8,"children":[{"id":60,"name":"ct_div_block","options":{"ct_id":60,"ct_parent":113,"selector":"div_block-60-67","original":{"padding-left":"20"},"nicename":"Div (#60)","activeselector":false},"depth":9,"children":[{"id":61,"name":"ct_text_block","options":{"ct_id":61,"ct_parent":60,"selector":"text_block-61-67","original":{"letter-spacing":"5","font-weight":"500","margin-bottom":"5","font-size":"25"},"nicename":"Text (#61)","ct_content":"50% OFF","activeselector":false,"media":{"tablet":{"original":{"font-size":"15"}}}},"depth":10},{"id":62,"name":"ct_headline","options":{"ct_id":62,"ct_parent":60,"selector":"headline-62-67","original":{"tag":"h2","font-size":"65","margin-bottom":"27","line-height":"1","font-weight":"500"},"nicename":"Heading (#62)","ct_content":"New Cocktail<br>Dresses","activeselector":false,"media":{"tablet":{"original":{"font-size":"45"}},"phone-landscape":{"original":{"font-size":"25"}}}},"depth":10},{"id":63,"name":"ct_text_block","options":{"ct_id":63,"ct_parent":60,"selector":"text_block-63-67","original":[],"nicename":"Text (#63)","ct_content":"SHOP NOW","classes":["c-btn-primary"],"activeselector":"c-btn-primary"},"depth":10}]}]}]},{"id":50,"name":"ct_div_block","options":{"ct_id":50,"ct_parent":42,"selector":"div_block-50-67","original":{"background-image":"https://shop.reyescode.com/wp-content/uploads/2023/07/curly_hair_white-1.webp","conditionspreview":"0","globalConditionsResult":false},"nicename":"SLIDER swiper-slide","classes":["swiper-slide","c-slider-classic-slide"],"activeselector":"swiper-slide"},"depth":7,"children":[{"id":111,"name":"ct_div_block","options":{"ct_id":111,"ct_parent":50,"selector":"div_block-111-67","original":{"width":"100","width-unit":"%","max-width":"980","margin-left-unit":"auto","margin-right-unit":"auto","text-align":"left","align-items":"flex-end"},"nicename":"Div (#111)"},"depth":8,"children":[{"id":68,"name":"ct_div_block","options":{"ct_id":68,"ct_parent":111,"selector":"div_block-68-67","original":{"width-unit":"%","max-width-unit":"%","align-items":"flex-end","text-align":"right","padding-right":"20"},"nicename":"Div (#68)","activeselector":false},"depth":9,"children":[{"id":69,"name":"ct_text_block","options":{"ct_id":69,"ct_parent":68,"selector":"text_block-69-67","original":{"letter-spacing":"5","font-size":"25","font-weight":"500","margin-bottom":"5"},"nicename":"Text (#61)","ct_content":"Summer '19","activeselector":false,"media":{"tablet":{"original":{"font-size":"15"}}}},"depth":10},{"id":70,"name":"ct_headline","options":{"ct_id":70,"ct_parent":68,"selector":"headline-70-67","original":{"tag":"h2","font-size":"65","margin-bottom":"27","line-height":"1","font-weight":"500"},"nicename":"Heading (#62)","ct_content":"Night Summer<br>Dresses","activeselector":false,"media":{"tablet":{"original":{"font-size":"45"}},"phone-landscape":{"original":{"font-size":"25"}}}},"depth":10},{"id":71,"name":"ct_text_block","options":{"ct_id":71,"ct_parent":68,"selector":"text_block-71-67","original":[],"nicename":"Text (#63)","ct_content":"SHOP NOW","classes":["c-btn-primary"],"activeselector":"c-btn-primary"},"depth":10}]}]}]},{"id":72,"name":"ct_div_block","options":{"ct_id":72,"ct_parent":42,"selector":"div_block-72-67","original":{"background-image":"https://shop.reyescode.com/wp-content/uploads/2023/07/monigote.webp","conditionspreview":"2","globalConditionsResult":true},"nicename":"SLIDER swiper-slide","classes":["swiper-slide","c-slider-classic-slide"],"activeselector":false,"media":{"phone-portrait":{"original":[]}}},"depth":7,"children":[{"id":100,"name":"ct_div_block","options":{"ct_id":100,"ct_parent":72,"selector":"div_block-100-67","original":{"width":"100","width-unit":"%","max-width":"980","margin-left-unit":"auto","margin-right-unit":"auto"},"nicename":"Div (#100)","activeselector":false},"depth":8,"children":[{"id":107,"name":"ct_div_block","options":{"ct_id":107,"ct_parent":100,"selector":"div_block-107-67","original":{"padding-left":"20"},"nicename":"Div (#107)","activeselector":false,"media":[]},"depth":9,"children":[{"id":108,"name":"ct_text_block","options":{"ct_id":108,"ct_parent":107,"selector":"text_block-108-67","original":{"letter-spacing":"5","font-size":"25","font-weight":"500","margin-bottom":"5"},"nicename":"Text (#61)","ct_content":"Spring/Summer '19","activeselector":false,"media":{"tablet":{"original":{"font-size":"15"}}}},"depth":10},{"id":109,"name":"ct_headline","options":{"ct_id":109,"ct_parent":107,"selector":"headline-109-67","original":{"tag":"h2","font-size":"65","margin-bottom":"27","line-height":"1","font-weight":"500"},"nicename":"Heading (#62)","ct_content":"The Weekent<br>Getaway","activeselector":false,"media":{"tablet":{"original":{"font-size":"45"}},"phone-landscape":{"original":{"font-size":"25"}}}},"depth":10},{"id":110,"name":"ct_text_block","options":{"ct_id":110,"ct_parent":107,"selector":"text_block-110-67","original":[],"nicename":"Text (#63)","ct_content":"SHOP NOW","classes":["c-btn-primary"],"activeselector":"c-btn-primary"},"depth":10}]}]}]}]},{"id":77,"name":"ct_div_block","options":{"ct_id":77,"ct_parent":40,"selector":"div_block-77-67","original":[],"nicename":"Arrow Prev","classes":["c-slider-classic-prev"],"activeselector":"c-slider-classic-prev"},"depth":6,"children":[{"id":81,"name":"ct_fancy_icon","options":{"ct_id":81,"ct_parent":77,"selector":"fancy_icon-81-67","original":{"icon-id":"FontAwesomeicon-chevron-left"},"nicename":"Icon (#81)","classes":["c-slider-classic-icon"],"activeselector":"c-slider-classic-icon"},"depth":7}]},{"id":78,"name":"ct_div_block","options":{"ct_id":78,"ct_parent":40,"selector":"div_block-78-67","original":[],"nicename":"Arrow Next","classes":["c-slider-classic-next"],"activeselector":"c-slider-classic-next"},"depth":6,"children":[{"id":79,"name":"ct_fancy_icon","options":{"ct_id":79,"ct_parent":78,"selector":"fancy_icon-79-67","original":{"icon-id":"FontAwesomeicon-chevron-right"},"nicename":"Icon (#79)","classes":["c-slider-classic-icon"],"activeselector":"c-slider-classic-icon"},"depth":7}]},{"id":88,"name":"ct_div_block","options":{"ct_id":88,"ct_parent":40,"selector":"div_block-88-67","original":{"conditionspreview":"0","globalConditionsResult":false},"nicename":"Bar Load","classes":["c-slider-classic-bar"],"activeselector":"c-slider-classic-bar"},"depth":6},{"id":89,"name":"ct_div_block","options":{"ct_id":89,"ct_parent":40,"selector":"div_block-89-67","original":[],"nicename":"Button Play","classes":["c-slider-classic-play"],"activeselector":"c-slider-classic-play"},"depth":6,"children":[{"id":90,"name":"ct_fancy_icon","options":{"ct_id":90,"ct_parent":89,"selector":"fancy_icon-90-67","original":{"icon-id":"FontAwesomeicon-play"},"nicename":"Play","classes":["c-slider-icon-play"],"activeselector":"c-slider-icon-play"},"depth":7},{"id":92,"name":"ct_fancy_icon","options":{"ct_id":92,"ct_parent":89,"selector":"fancy_icon-92-67","original":{"icon-id":"FontAwesomeicon-pause"},"nicename":"Paused","classes":["c-slider-icon-paused"],"activeselector":"c-slider-icon-paused"},"depth":7}]},{"id":93,"name":"ct_div_block","options":{"ct_id":93,"ct_parent":40,"selector":"div_block-93-67","original":{"flex-direction":"row","display":"flex","position":"absolute","left":"50","left-unit":"%","bottom":"20","transform":[{"transform-type":"translate","translateX":"-50","translateX-unit":"%"}],"justify-content":"center"},"nicename":"Pagination","classes":["c-slider-classic-pagination"],"activeselector":"c-slider-classic-pagination"},"depth":6}]}]}]},"classes":{"swiper":{"key":"swiper","original":{"max-width-unit":"%","width-unit":"%","selector-locked":"true","width":"100","max-width":"100"}},"c-slider-classic":{"key":"c-slider-classic","original":{"min-height-unit":" "}},"swiper-wrapper":{"key":"swiper-wrapper","original":{"width-unit":"%","max-width-unit":"%","width":"100","max-width":"100","flex-direction":"row","display":"flex","selector-locked":"true"}},"swiper-slide":{"key":"swiper-slide","original":{"width-unit":"%","max-width-unit":"%","width":"100","selector-locked":"true","max-width":"100"}},"c-slider-classic-slide":{"key":"c-slider-classic-slide","media":{"tablet":{"original":{"width-unit":"%","max-width-unit":"%","height-unit":"px","min-height-unit":" ","flex-direction":"column","display":"flex","width":"100","max-width":"100","align-items":"flex-start","min-height":"calc(90vh - 60px)"}}},"original":{"height-unit":"px","min-height-unit":" ","background-position-left-unit":"%","background-position-top-unit":"%","background-size":"cover","background-position-left":"50","background-position-top":"50","display":"flex","justify-content":"center","background-repeat":"no-repeat","min-height":"calc(100vh - 60px)","height":"100"}},"c-btn-primary":{"key":"c-btn-primary","original":{"padding-top":"10","padding-right":"30","padding-bottom":"10","padding-left":"30","background-color":"#594cbf","color":"#f6f6f6","letter-spacing":"2","font-weight":"500","font-size":"14"}},"c-slider-classic-prev":{"key":"c-slider-classic-prev","media":{"tablet":{"original":{"top-unit":"px","bottom-unit":"px","bottom":"40"}}},"original":{"transform":{"0":{"transform-type":"translate","translateY":"-50","translateY-unit":"%"}},"top-unit":"%","right-unit":"%","left-unit":"px","bottom-unit":"%","position":"absolute","left":"20","z-index":"5","custom-css":"cursor: pointer;","bottom":"50"}},"c-slider-classic-icon":{"key":"c-slider-classic-icon","original":{"icon-size":"30"}},"c-slider-classic-next":{"key":"c-slider-classic-next","media":{"tablet":{"original":{"bottom-unit":"px","right-unit":" ","bottom":"0","right":"initial","left":"20"}}},"original":{"transform":{"0":{"transform-type":"translate","translateY":"-50","translateY-unit":"%"}},"top-unit":"%","bottom-unit":"%","custom-css":"cursor: pointer;","position":"absolute","right":"20","z-index":"5","bottom":"50"}},"c-slider-classic-bar":{"key":"c-slider-classic-bar","original":{"width-unit":"%","position":"absolute","width":"0","height":"2","background-color":"#594cbf","z-index":"2","left":"0","top":"0"}},"c-slider-classic-play":{"key":"c-slider-classic-play","original":{"position":"absolute","bottom":"20","right":"20","z-index":"5","custom-css":"cursor: pointer;"}},"c-slider-icon-play":{"key":"c-slider-icon-play","original":{"transform":{"0":{"transform-type":"scale","scaleX":"0","scaleY":"0","scaleZ":"0"}},"icon-size":"30","transition-duration":"0.3"}},"c-slider-icon-paused":{"key":"c-slider-icon-paused","original":{"icon-size":"30","position":"absolute","transition-duration":"0.3"}},"c-slider-classic-pagination":{"key":"c-slider-classic-pagination","original":{"transform":{"0":{"transform-type":"translate","translateX":"-50","translateX-unit":"%"}},"left-unit":"px","bottom-unit":"px","z-index":"1","flex-direction":"row","display":"flex"}}}}