-1

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>
0

1 Resposta 1

0

O problema do seu código, é que você tem conflitos quando você faz uma querySelector do document, e isso está por toda parte no seu código.

Se você quer esses dois slides funcionando separadamente, você precisa de uma query buscando elementos apenas dentro da raiz do slide, não procurando na sua página inteira. Como querySelector é um método que pode ser invocado em qualquer elemento, você só precisa encontrar a raiz do seu slide (no caso, a sua figure) e utiliza-lo como base na função setaImagem.

Só modificando o JavaScript, para ter o código funcionando você pode utilizar isso:

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);

Coloquei alguns placeholders no seu código para vê-lo funcionando, apenas como exemplo:

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>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .