{"id":4826,"date":"2024-09-04T12:15:09","date_gmt":"2024-09-04T15:15:09","guid":{"rendered":"https:\/\/gustavocampelo.com.br\/?p=4826"},"modified":"2024-11-10T22:59:54","modified_gmt":"2024-11-11T01:59:54","slug":"slider-colorado","status":"publish","type":"post","link":"https:\/\/gustavocampelo.com.br\/blog\/slider-colorado\/","title":{"rendered":"Slider Colorado"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"4826\" class=\"elementor elementor-4826\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-838611c e-flex e-con-boxed e-con e-child\" data-id=\"838611c\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c088739 elementor-widget elementor-widget-video\" data-id=\"c088739\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/sZr80W3pFNs&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-42f210c e-flex e-con-boxed e-con e-parent\" data-id=\"42f210c\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8dfa146 elementor-widget elementor-widget-heading\" data-id=\"8dfa146\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">C\u00f3digo CSS<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-06efea8 elementor-widget elementor-widget-code-highlight\" data-id=\"06efea8\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow  \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css \">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>\/* LATAS *\/\r\n\r\n.lataSlider{\r\n    transform: translateY(220%);\r\n    transition: all 0s;\r\n}\r\n\r\n.lataSlider.ativo{\r\n    position: static;\r\n    transition: all .6s .3s ease-out;\r\n    transform: translateY(0%);\r\n\r\n}\r\n\r\n\r\n.lataSlider.lataSubiu{\r\n    transition: all .6s ease-in;\r\n    transform: translateY(-220%);\r\n}\r\n\r\n\r\n\r\n\/* CONTAINER ESQUERDA *\/\r\n\r\n.containerEsquerda{\r\n    transition: all .6s;\r\n    opacity: 0;\r\n    z-index: -1;\r\n}\r\n\r\n\r\n.containerEsquerda.ativo{\r\n    position: static;\r\n    transform: translateX(0%);\r\n    transition: all .6s;\r\n    opacity: 1;\r\n}\r\n\r\n.conteudoEsquerda{\r\n    transition: 0s;\r\n    transition-delay: 0s;\r\n    opacity: 0;\r\n}\r\n\r\n.containerEsquerda.ativo .conteudoEsquerda{\r\n    opacity: 1;\r\n    position: static;\r\n}\r\n\r\n\r\n\r\n\/* CONTAINER DIREITA *\/\r\n\r\n.conteudoDireita{\r\n    transform: translateX(-100%);\r\n    opacity: 0;\r\n    transition: opacity 0s;\r\n    \r\n}\r\n\r\n.conteudoDireita.ativo{\r\n    position: static;\r\n    transform: translateX(0%);\r\n    opacity: 1;\r\n    transition: transform 1.8s, opacity .6s .6s;\r\n}\r\n\r\n.conteudoDireita .infoCerveja{\r\n    opacity: 0;\r\n    transition: all .5s;\r\n}\r\n\r\n.conteudoDireita.ativo .infoCerveja{\r\n    opacity: 1;\r\n    transition-delay: 1.6s;\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bb2a626 e-flex e-con-boxed e-con e-parent\" data-id=\"bb2a626\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f4b0d9f elementor-widget elementor-widget-heading\" data-id=\"f4b0d9f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">C\u00f3digo JS<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-67dd501 elementor-widget elementor-widget-html\" data-id=\"67dd501\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-tomorrow  \">\n\t<pre data-line=\"\" class=\"highlight-height  language-javascript\">\n\t\t<code readonly=\"true\" class=\"  language-javascript\">\n&lt;script&gt;\n    \nlet arrayContainerEsquerda = document.querySelectorAll(\".containerEsquerda\");\nlet arrayConteudoDireita = document.querySelectorAll(\".conteudoDireita\");\nlet arrayLataSlider = document.querySelectorAll(\".lataSlider\");\n\n\nlet nextButton = document.querySelector(\".nextButton\");\nlet prevButton = document.querySelector(\".prevButton\");\n\nultimoContainerEsquerda = arrayContainerEsquerda.length -1\nindex = 0\n\nfunction movimentarSlide(){\n    let lataSliderAtivo = document.querySelector(\".lataSlider.ativo\");\n    lataSliderAtivo.classList.add(\"lataSubiu\")\n    let lataSubiu = document.querySelector(\".lataSlider.lataSubiu\");\n    setTimeout(() => {\n        lataSubiu.classList.remove(\"lataSubiu\");\n    }, 1000);\n    lataSliderAtivo.classList.remove(\"ativo\");\n    setTimeout(() => {\n        arrayLataSlider[index].classList.add(\"ativo\");;\n    }, 500);\n\n\n    let conteudoDireitaAtivo = document.querySelector(\".conteudoDireita.ativo\");\n    conteudoDireitaAtivo.classList.remove(\"ativo\");\n    arrayConteudoDireita[index].classList.add(\"ativo\");\n\n    let containerEsquerdaAtivo = document.querySelector(\".containerEsquerda.ativo\");\n    containerEsquerdaAtivo.classList.remove(\"ativo\");\n    setTimeout(() => {\n         arrayContainerEsquerda[index].classList.add(\"ativo\");\n     }, 600);\n}\n\nnextButton.onclick = () =>{\n    if(index < ultimoContainerEsquerda){\n        index ++;\n        movimentarSlide();\n    }else{\n        index = 0;\n        movimentarSlide();\n    }\n}\n\nprevButton.onclick = () =>{\n    if(index > 0){\n        index --;\n        movimentarSlide();\n    }else{\n        index = ultimoContainerEsquerda;\n        movimentarSlide();\n    }\n}\n\n&lt;\/script&gt;\n\t\t<\/code>\n\t<\/pre>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>C\u00f3digo CSS \/* LATAS *\/ .lataSlider{ transform: translateY(220%); transition: all 0s; } .lataSlider.ativo{ position: static; transition: all .6s .3s ease-out; transform: translateY(0%); } .lataSlider.lataSubiu{ transition: all .6s ease-in; transform: translateY(-220%); } \/* CONTAINER ESQUERDA *\/ .containerEsquerda{ transition: all .6s; opacity: 0; z-index: -1; } .containerEsquerda.ativo{ position: static; transform: translateX(0%); transition: all .6s; opacity: 1; } [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4824,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4826","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/gustavocampelo.com.br\/blog\/wp-json\/wp\/v2\/posts\/4826","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gustavocampelo.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gustavocampelo.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gustavocampelo.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gustavocampelo.com.br\/blog\/wp-json\/wp\/v2\/comments?post=4826"}],"version-history":[{"count":0,"href":"https:\/\/gustavocampelo.com.br\/blog\/wp-json\/wp\/v2\/posts\/4826\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gustavocampelo.com.br\/blog\/wp-json\/wp\/v2\/media\/4824"}],"wp:attachment":[{"href":"https:\/\/gustavocampelo.com.br\/blog\/wp-json\/wp\/v2\/media?parent=4826"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gustavocampelo.com.br\/blog\/wp-json\/wp\/v2\/categories?post=4826"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gustavocampelo.com.br\/blog\/wp-json\/wp\/v2\/tags?post=4826"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}