Como posso colocar outro slide igual a esse sem que haja conflitos e os dois funcionem?

javaScript

<script type="text/javascript"> function setaImagem(){     var settings = {         primeiraImg: function(){             elemento = document.querySelector("#slider 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> 

HTML

                        <figure>                             <span class="trs next"></span>                             <span class="trs prev"></span>                              <div id="slider">                                 <a href="#" class="trs"><img class="slide_serv" src="Imagens/Fotos/DSCF1.jpeg" alt="LLavagem" /></a>                                 <a href="#" class="trs"><img class="slide_serv1" src="Imagens/Fotos/DSCF2.JPG" alt="Manutenção" /></a>                                 <a href="#" class="trs"><img class="slide_serv1" src="Imagens/Fotos/DSCF3.JPG" alt="Manutenção" /></a>                                 <a href="#" class="trs"><img class="slide_serv2" src="Imagens/Fotos/DSCF4.JPG" alt="Produtos" /></a>                             </div>                              <figcaption></figcaption>                         </figure>                     </div> 

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; }    #slider {     position: relative;      z-index: 1;     width:33rem;  } #slider a {      position: absolute;      top: 0;     left: 0;      opacity: 0;     filter:alpha(opacity=0); } .slider {     position: relative;      z-index: 1;     width:33rem;  } #slider 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; }