Daniel.P.N

Galera, Bom dia! Tem alguma forma de isolar um script js para que não dê conflito com outro js?

Olá prezados, Bom dia! Eu sou novo na área... e estou montando uma página na qual tem um slider no topo e no meio uma galeria de portfólio com filtro e lightbox, porém ambas funcionam em projetos individuais, mas quando são usados ambos scripts em um projeto único, um está conflitando com o outro, anulando uma funcionalidade do outro. Testes realizados: - Renomeação de variável para não conflitar. - Script de ambos em arquivos unidos e ate separados E nada de funcionar corretamente o problema persiste!! Teria alguma forma de evitar conflitos de script de JS? Poderiam me ajudar! E agradeço a todos pela atenção! Segue ambos os scripts que utilizei como exemplos: https://www.w3schools.com/howto/howto_js_slideshow.asp https://www.w3schools.com/howto/howto_js_portfolio_filter.asp https://www.w3schools.com/howto/howto_js_lightbox.asp //Modo - Slider\\ var slideIndex = 0; showSlides(); var slides, pontos; function showSlides() { var i; slides = document.getElementsByClassName("mySlides"); pontos = document.getElementsByClassName("ponto"); for (i = 0; i < slides.length; i++) { slides.style.display = "none"; } slideIndex++; if (slideIndex > slides.length) { slideIndex = 1; } for (i = 0; i < pontos.length; i++) { pontos.className = pontos.className.replace(" active", ""); } slides[slideIndex - 1].style.display = "block"; pontos[slideIndex - 1].className += " active"; // Tempo para alterar imagem a cada 6 segundos setTimeout(showSlides, 6000); } function plusSlides(position) { slideIndex += position; if (slideIndex > slides.length) { slideIndex = 1; } else if (slideIndex < 1) { slideIndex = slides.length; } for (i = 0; i < slides.length; i++) { slides.style.display = "none"; } for (i = 0; i < pontos.length; i++) { pontos.className = pontos.className.replace(" active", ""); } slides[slideIndex - 1].style.display = "block"; pontos[slideIndex - 1].className += " active"; } function currentSlide(index) { if (index > slides.length) { index = 1; } else if (index < 1) { index = slides.length; } for (i = 0; i < slides.length; i++) { slides.style.display = "none"; } for (i = 0; i < pontos.length; i++) { pontos.className = pontos.className.replace(" active", ""); } slides[index - 1].style.display = "block"; pontos[index - 1].className += " active"; } --------------------- // Modo - Portfólio // Executa a função e mostra todas as colunas filterSelection("todos"); function filterSelection(c) { var x, y; x = document.getElementsByClassName("columnPort"); if (c === "todos") c = ""; // Adicione a classe "show" (display: block) aos elementos filtrados // e remova a classe "show" dos elementos que não estão selecionados for (y = 0; y < x.length; y++) { filtraRemovClass(x[y], "showPort"); if (x[y].className.indexOf(c) > -1) filtraMostraClass(x[y], "showPort"); } } // Mostrar elementos filtrados function filtraMostraClass(element, name) { var y, arr1, arr2; arr1 = element.className.split(" "); arr2 = name.split(" "); for (y = 0; y < arr2.length; y++) { if (arr1.indexOf(arr2[y]) === -1) { element.className += " " + arr2[y]; } } } //Ocultar elementos que não estão selecionados function filtraRemovClass(element, name) { var y, arr1, arr2; arr1 = element.className.split(" "); arr2 = name.split(" "); for (y = 0; y < arr2.length; y++) { while (arr1.indexOf(arr2[y]) > -1) { arr1.splice(arr1.indexOf(arr2[y]), 1); } } element.className = arr1.join(" "); } // Adicionar classe ativa ao botão atual (realce) var btnContainerFilt = document.getElementById("btnFiltroPort"); var btnsRealce = btnContainerFilt.getElementsByClassName("btn_filtro"); for (var y = 0; y < btnsRealce.length; y++) { btnsRealce[y].addEventListener("click", function () { var current = document.getElementsByClassName("active"); // Em caso de conflito do btn realce com Slider alterar o array 0 para 1 current[0].className = current[0].className.replace(" active", ""); // current[1].className = current[1].className.replace(" active", ""); this.className += " active"; }); } /*////////////MODAL-LIGHTBOX\\\\\\\\\\\\*/ //Abri o Modal function openModal() { document.getElementById("myModalPort").style.display = "block"; } // Fecha o Modal function closeModal() { document.getElementById("myModalPort").style.display = "none"; } var portIndex = 1; showSlidesPort(portIndex); // Next/previous controls function plusPort(n) { showSlidesPort(portIndex += n); } //Esta dando conflito com os pontos do slide // Controle da imagem visualizada function currentPort(n) { showSlidesPort(portIndex = n); } function showSlidesPort(n) { var p; var slidesPort = document.getElementsByClassName("mySlidesPort"); if (n > slidesPort.length) { portIndex = 1; } if (n < 1) { portIndex = slidesPort.length; } for (p = 0; p < slidesPort.length; p++) { slidesPort[p].style.display = "none"; } slidesPort[portIndex - 1].style.display = "block"; }