Dois slider numa mesma pagina!

[Ronaldap 0]

Boa tarde,

To tentando criar slider q ao clicar numa imagem abra o slider correspondente.

Sao 12 imagens correspondente um slider pra cada um ao clicar na imagem abre o slider.

Um ta funcionando quando coloco o segundo nao carrega as imagens novas.

ja tentei acrescentar todos denovo com o nome diferente mais ainda nao funciona.

Vou colocar aqui o codigo que estou usando e gostaria de saber como faco pra recarregar as novas imagens na hora de abrir o slider.

pode ser ate um slider so mais na hora que abrir ele recarregue as imagens.

slider.js

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

slider.css

* {margin: 0; padding: 0;}

body {background: #EEEEEE}

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

#slider a { position: absolute; top: 0; left: 0; opacity: 0;filter:alpha(opacity=0);}

.ativo {opacity: 1!important; filter:alpha(opacity=100)!important;}

/*controladores*/

span {background: #EEEEEE; 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: #000; 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: 600px; height: 550px; position: relative; overflow: hidden; margin: 50px auto;}

figcaption {padding-left: 20px;color: #000; font-family: "Kaushan Script","Lato","arial"; font-size: 22px; background: #A9A9A9; width: 100%; position: absolute; bottom: 0; left: 0; line-height: 55px; height: 55px; z-index: 5}

arquivo.php

<link rel="stylesheet" href="assets/css/style.css">

<script src="slider.js"></script>

<figure>

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

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

<div id="slider">

<a href="javascript: fechar();" class="trs"><img src="imagem1.JPG" alt="imagem1" height="500" width="600"/></a>

<a href="javascript: fechar();" class="trs"><img src="imagem1.JPG" alt="imagem2" height="500" width="600"/></a>

<a href="javascript: fechar();" class="trs"><img src="imagem1.JPG" alt="imagem3" height="500" width="600"/></a>

</div>

<figcaption></figcaption>

</figure>