I would like to put 2 slides equal but is having conflict in some part of Javascript, how can I put the two slides without conflicts?

Question

CSS

<style type="text/css">
    a,img {
        border: none;

    }

    .trs {
        -webkit-transition:all ease-out 0.5s;
        -moz-transition:all ease-out 0.5s;
        -o-transition:all ease-out 0.5s;
        -ms-transition:all ease-out 0.5s;
        transition:all ease-out 0.5s;
    }  

    .slidershow {
        position: relative; 
        z-index: 1;
        width:33rem;

    }
    .slidershow a { 
        position: absolute; 
        top: 0;
        left: 0; 
        opacity: 0;
        filter:alpha(opacity=0);
    }
    .slider {
        position: relative; 
        z-index: 1;
        width:33rem;

    }
    .slidershow a { 
        position: absolute; 
        top: 0;
        left: 0; 
        opacity: 0;
        filter:alpha(opacity=0);
    }
    .ativo {
        opacity: 1!important;
        filter:alpha(opacity=100)!important;
    }

    /*controladores*/
    .next, .prev{
        background-color: black;
        cursor: pointer; 
        opacity: 0;
        filter:alpha(opacity=0); 
        position: absolute; 
        bottom: 40%; 
        width: 43px; 
        height: 43px; 
        z-index: 5;
    }
    .next {
        right: 10px;
    }
    .next:before, .next:after {
        left: 21px;
    }
    .next:before {
        -webkit-transform: rotate(-42deg);
        top: 5px;
    }
    .next:after {
        -webkit-transform: rotate(-132deg);
        top: 19px;
    }
    .next:before,.next:after,.prev:before,.prev:after {content: "";
        height: 20px;
        background: #fff;
        width: 1px;
        position: absolute;
    }
    .prev {
        left: 10px;
    }
    .prev:before,.prev:after {
        left: 18px;
    }
    .prev:before {
        -webkit-transform: rotate(42deg);
        top: 5px;
    }
    .prev:after {
        -webkit-transform: rotate(132deg);
        top: 19px;
    }

    figure:hover span {opacity: 0.76;filter:alpha(opacity=76);}
        figure {
        max-width: 937px;
        height: 354px;
        position: relative;
        overflow: hidden;
        margin: 50px auto;
    }

    figcaption {
        opacity: 0;
    }

    .slide_serv{
        width:42rem;
    }
    .slide_serv1{
        top:2rem;
        width:35rem;
    }

    .slide_serv2{
        top:2rem;
        width:33rem;
    }
</style>

HTML

 <figure>
    <span class="trs next"></span>
    <span class="trs prev"></span>

    <div class="slidershow">
        <a href="#" class="trs"><img class="slide_serv" src="1.png" alt="Residencia" /></a>
        <a href="#" class="trs"><img class="slide_serv1" src="2.png" alt="viagem" /></a>
        <a href="#" class="trs"><img class="slide_serv1" src="3.jpg" alt="politica" /></a>
        <a href="#" class="trs"><img class="slide_serv2" src="4.png" alt="saude" /></a>
    </div>

    <figcaption></figcaption>
</figure>

<figure>

    <span class="trs next"></span>
    <span class="trs prev"></span>

    <div class="slidershow">
        <a href="#" class="trs"><img class="slide_serv" src="1.png" alt="veiculos" /></a>
        <a href="#" class="trs"><img class="slide_serv1" src="2.png" alt="alimentos" /></a>
        <a href="#" class="trs"><img class="slide_serv1" src="3.jpg" alt="Sapatos" /></a>
        <a href="#" class="trs"><img class="slide_serv2 " src="4.png" alt="Roupas" /></a>
    </div>

   <figcaption></figcaption>
</figure>

Javascript

<script type="text/javascript">
function setaImagem(){
    var settings = {
        primeiraImg: function(){
            elemento = document.querySelector(".slidershow a:first-child");
            elemento.classList.add("ativo");
            this.legenda(elemento);
        },

        slide: function(){
            elemento = document.querySelector(".ativo");

            if(elemento.nextElementSibling){
                elemento.nextElementSibling.classList.add("ativo");
                settings.legenda(elemento.nextElementSibling);
                elemento.classList.remove("ativo");
            }else{
                elemento.classList.remove("ativo");
                settings.primeiraImg();
            }

        },

        proximo: function(){
            clearInterval(intervalo);
            elemento = document.querySelector(".ativo");

            if(elemento.nextElementSibling){
                elemento.nextElementSibling.classList.add("ativo");
                settings.legenda(elemento.nextElementSibling);
                elemento.classList.remove("ativo");
            }else{
                elemento.classList.remove("ativo");
                settings.primeiraImg();
            }
            intervalo = setInterval(settings.slide,4000);
        },

        anterior: function(){
            clearInterval(intervalo);
            elemento = document.querySelector(".ativo");

            if(elemento.previousElementSibling){
                elemento.previousElementSibling.classList.add("ativo");
                settings.legenda(elemento.previousElementSibling);
                elemento.classList.remove("ativo");
            }else{
                elemento.classList.remove("ativo");                     
                elemento = document.querySelector("a:last-child");
                elemento.classList.add("ativo");
                this.legenda(elemento);
            }
            intervalo = setInterval(settings.slide,4000);
        },

        legenda: function(obj){
            var legenda = obj.querySelector("img").getAttribute("alt");
            document.querySelector("figcaption").innerHTML = legenda;
        }

    }

    //chama o slide
    settings.primeiraImg();

    //chama a legenda
    settings.legenda(elemento);

    //chama o slide à um determinado tempo
    var intervalo = setInterval(settings.slide,4000);
    document.querySelector(".next").addEventListener("click",settings.proximo,false);
    document.querySelector(".prev").addEventListener("click",settings.anterior,false);
}

window.addEventListener("load",setaImagem,false);
</script>

Answer 1

The problem with your code is that you have conflicts when you make a querySelector of document, and it’s all over your code.

If you want these two slides to work separately, you need a query searching for elements just inside the root of the slide, not searching your entire page. Like querySelector is a method that can be invoked on any element, you just need to find the root of your slide (in case, your figure) and use it as a basis for function setaImagem.

Only modifying Javascript, to have the code working you can use it:

function setaImagem(figure){
    var settings = {
        primeiraImg: function(){
            elemento = figure.querySelector(".slidershow a:first-child");
            elemento.classList.add("ativo");
            this.legenda(elemento);
        },

        slide: function(){
            elemento = figure.querySelector(".ativo");

            if(elemento.nextElementSibling){
                elemento.nextElementSibling.classList.add("ativo");
                settings.legenda(elemento.nextElementSibling);
                elemento.classList.remove("ativo");
            } else {
                elemento.classList.remove("ativo");
                settings.primeiraImg();
            }

        },

        proximo: function(){
            clearInterval(intervalo);
            elemento = figure.querySelector(".ativo");

            if(elemento.nextElementSibling){
                elemento.nextElementSibling.classList.add("ativo");
                settings.legenda(elemento.nextElementSibling);
                elemento.classList.remove("ativo");
            }else{
                elemento.classList.remove("ativo");
                settings.primeiraImg();
            }
            intervalo = setInterval(settings.slide,4000);
        },

        anterior: function(){
            clearInterval(intervalo);
            elemento = figure.querySelector(".ativo");

            if(elemento.previousElementSibling){
                elemento.previousElementSibling.classList.add("ativo");
                settings.legenda(elemento.previousElementSibling);
                elemento.classList.remove("ativo");
            }else{
                elemento.classList.remove("ativo");                     
                elemento = figure.querySelector("a:last-child");
                elemento.classList.add("ativo");
                settings.legenda(elemento);
            }
            intervalo = setInterval(settings.slide,4000);
        },

        legenda: function(obj){
            var legenda = obj.querySelector("img").getAttribute("alt");
            figure.querySelector("figcaption").innerHTML = legenda;
        }

    }

    //chama o slide
    settings.primeiraImg();

    //chama a legenda
    settings.legenda(elemento);

    //chama o slide à um determinado tempo
    var intervalo = setInterval(settings.slide,4000);
    figure.querySelector(".next").addEventListener("click",settings.proximo,false);
    figure.querySelector(".prev").addEventListener("click",settings.anterior,false);
}

window.addEventListener("load", () => {
    // Encontra todos os slidershow, você pode procurar a figure
    // diretamenta se der uma classe especifica para ela
    for (var slidershow of document.getElementsByClassName('slidershow')) {
        // Encontra a figure mais próxima do slideshow e a envia pata função
        // setaImagem usa-la como base nas queries
        setaImagem(slidershow.closest('figure'));
    }
}, false);

---

I put some placeholders in your code to see it working, just as an example:

function setaImagem(figure){
    var settings = {
        primeiraImg: function(){
            elemento = figure.querySelector(".slidershow a:first-child");
            elemento.classList.add("ativo");
            this.legenda(elemento);
        },

        slide: function(){
            elemento = figure.querySelector(".ativo");

            if(elemento.nextElementSibling){
                elemento.nextElementSibling.classList.add("ativo");
                settings.legenda(elemento.nextElementSibling);
                elemento.classList.remove("ativo");
            } else {
                elemento.classList.remove("ativo");
                settings.primeiraImg();
            }

        },

        proximo: function(){
            clearInterval(intervalo);
            elemento = figure.querySelector(".ativo");

            if(elemento.nextElementSibling){
                elemento.nextElementSibling.classList.add("ativo");
                settings.legenda(elemento.nextElementSibling);
                elemento.classList.remove("ativo");
            }else{
                elemento.classList.remove("ativo");
                settings.primeiraImg();
            }
            intervalo = setInterval(settings.slide,4000);
        },

        anterior: function(){
            clearInterval(intervalo);
            elemento = figure.querySelector(".ativo");

            if(elemento.previousElementSibling){
                elemento.previousElementSibling.classList.add("ativo");
                settings.legenda(elemento.previousElementSibling);
                elemento.classList.remove("ativo");
            }else{
                elemento.classList.remove("ativo");                     
                elemento = figure.querySelector("a:last-child");
                elemento.classList.add("ativo");
                settings.legenda(elemento);
            }
            intervalo = setInterval(settings.slide,4000);
        },

        legenda: function(obj){
            var legenda = obj.querySelector("img").getAttribute("alt");
            figure.querySelector("figcaption").innerHTML = legenda;
        }

    }

    //chama o slide
    settings.primeiraImg();

    //chama a legenda
    settings.legenda(elemento);

    //chama o slide à um determinado tempo
    var intervalo = setInterval(settings.slide,4000);
    figure.querySelector(".next").addEventListener("click",settings.proximo,false);
    figure.querySelector(".prev").addEventListener("click",settings.anterior,false);
}

window.addEventListener("load", () => {
    for (var slidershow of document.getElementsByClassName('slidershow')) {
        setaImagem(slidershow.closest('figure'));
    }
}, false);

a,img {
    border: none;

}

.trs {
    -webkit-transition:all ease-out 0.5s;
    -moz-transition:all ease-out 0.5s;
    -o-transition:all ease-out 0.5s;
    -ms-transition:all ease-out 0.5s;
    transition:all ease-out 0.5s;
}  

.slidershow {
    position: relative; 
    z-index: 1;
    width:33rem;

}
.slidershow a { 
    position: absolute; 
    top: 0;
    left: 0; 
    opacity: 0;
    filter:alpha(opacity=0);
}
.slider {
    position: relative; 
    z-index: 1;
    width:33rem;

}
.slidershow a { 
    position: absolute; 
    top: 0;
    left: 0; 
    opacity: 0;
    filter:alpha(opacity=0);
}
.ativo {
    opacity: 1!important;
    filter:alpha(opacity=100)!important;
}

/*controladores*/
.next, .prev{
    background-color: black;
    cursor: pointer; 
    opacity: 0;
    filter:alpha(opacity=0); 
    position: absolute; 
    bottom: 40%; 
    width: 43px; 
    height: 43px; 
    z-index: 5;
}
.next {
    right: 10px;
}
.next:before, .next:after {
    left: 21px;
}
.next:before {
    -webkit-transform: rotate(-42deg);
    top: 5px;
}
.next:after {
    -webkit-transform: rotate(-132deg);
    top: 19px;
}
.next:before,.next:after,.prev:before,.prev:after {content: "";
    height: 20px;
    background: #fff;
    width: 1px;
    position: absolute;
}
.prev {
    left: 10px;
}
.prev:before,.prev:after {
    left: 18px;
}
.prev:before {
    -webkit-transform: rotate(42deg);
    top: 5px;
}
.prev:after {
    -webkit-transform: rotate(132deg);
    top: 19px;
}

figure:hover span {opacity: 0.76;filter:alpha(opacity=76);}
    figure {
    max-width: 937px;
    height: 354px;
    position: relative;
    overflow: hidden;
    margin: 50px auto;
}

figcaption {
    opacity: 0;
}

.slide_serv{
    width:42rem;
}
.slide_serv1{
    top:2rem;
    width:35rem;
}

.slide_serv2{
    top:2rem;
    width:33rem;
}

<figure>
    <span class="trs next"></span>
    <span class="trs prev"></span>

    <div class="slidershow">
        <a href="#" class="trs"><img class="slide_serv" src="https://via.placeholder.com/500/FF0000/FFFFFF" alt="Residencia" /></a>
        <a href="#" class="trs"><img class="slide_serv" src="https://via.placeholder.com/500/0000FF/808080" alt="viagem" /></a>
        <a href="#" class="trs"><img class="slide_serv" src="https://via.placeholder.com/500/FFFF00/000000" alt="politica" /></a>
        <a href="#" class="trs"><img class="slide_serv" src="https://via.placeholder.com/500/000000/FFFFFF" alt="saude" /></a>
    </div>

    <figcaption></figcaption>
</figure>

<figure>

    <span class="trs next"></span>
    <span class="trs prev"></span>

    <div class="slidershow">
        <a href="#" class="trs"><img class="slide_serv" src="https://via.placeholder.com/500/000000/FFFFFF" alt="veiculos" /></a>
        <a href="#" class="trs"><img class="slide_serv" src="https://via.placeholder.com/500/0000FF/808080" alt="alimentos" /></a>
        <a href="#" class="trs"><img class="slide_serv" src="https://via.placeholder.com/500/FF0000/FFFFFF" alt="Sapatos" /></a>
        <a href="#" class="trs"><img class="slide_serv" src="https://via.placeholder.com/500/FFFF00/000000" alt="Roupas" /></a>
    </div>

   <figcaption></figcaption>
</figure>