Estoy tratando de tener un segundo control deslizante en la misma página, pero no funciona. El primero funciona bien, pero el segundo no funciona. Creo que hay algo mal con el método del elemento principal, pero no puedo entenderlo.
var ids = ["view_0", "view_1", "view_2", "view_3"] let current_id = 0; function next(productnr) { if (document.getElementById(ids[current_id]).parentElement.id == productnr) { let last_array_position = ids.length; document.getElementById(ids[current_id]).classList.remove("show"); current_id++; if (current_id >= last_array_position) { current_id = 0; } document.getElementById(ids[current_id]).classList.add("show"); } } #1 img { display: none; } #1 img.show { display: block; } <article id=1> <img class="show" id="view_0"></img> <img id="view_1"></img> <img id="view_2"></img> <img id="view_3"></img> <button><</button> <button onclick="next(1)">></button> <article id=2> <img class="show" id="view_0"></img> <img id="view_1"></img> <img id="view_2"></img> <img id="view_3"></img> <button><</button> <button onclick="next(2)">></button>La razón por la que su código no funciona es que está utilizando la misma id para ambos controles deslizantes en HTML . Esto siempre actualizará la diapositiva anterior pero nunca cambiará la última diapositiva mediante su función de JavaScript . Además, su código tiene algunos problemas, como que las etiquetas no se cierran correctamente, no hay atributos src . Parece que necesita varias matrices para almacenar ID de múltiples controles deslizantes y múltiples funciones para manejar los botones anterior y siguiente.
Aquí hay una función común para manejar todos los botones de múltiples controles deslizantes en una sola página sin matrices:
function next(productId, next) { var tags = document.getElementById(productId).getElementsByTagName("img"); var index; for (let i = 0; i < tags.length; i++) { if (tags[i].className == "show") { index = i; break; } } tags[index].classList.remove("show") index = next ? (index + 1) : (index - 1); index = index == tags.length ? 0 : index == -1 ? tags.length - 1 : index; tags[index].classList.add("show") } img { display: none; width: 100px; height: 100px; object-fit: cover; } img.show { display: block; } <div id="product1"> <img class="show" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" /> <img src="https://images.ctfassets.net/hrltx12pl8hq/61DiwECVps74bWazF88Cy9/2cc9411d050b8ca50530cf97b3e51c96/Image_Cover.jpg?fit=fill&w=480&h=270" /> <img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&w=1000&q=80" /> <img src="https://www.gettyimages.com/gi-resources/images/500px/983794168.jpg" /> <button onclick="next('product1', 0)">Prev</button> <button onclick="next('product1', 1)">Next</button> </div> <div id="product2"> <img class="show" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" /> <img src="https://images.ctfassets.net/hrltx12pl8hq/61DiwECVps74bWazF88Cy9/2cc9411d050b8ca50530cf97b3e51c96/Image_Cover.jpg?fit=fill&w=480&h=270" /> <img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&w=1000&q=80" /> <img src="https://www.gettyimages.com/gi-resources/images/500px/983794168.jpg" /> <button onclick="next('product2', 0)">Prev</button> <button onclick="next('product2', 1)">Next</button> </div>Para lo que está tratando de hacer, sugeriría usar querySelector para seleccionar los elements , ya que esto nos permitirá seleccionar exactamente el componente con la id dada debajo del slider dado, ya que hay varios elementos con la misma identificación ( en tal caso repetitivo, la forma sugerida es usar class en lugar de id ) .
counter_id como counter of image para cada control deslizante que tiene la identificación como clave del control deslizante.slider id como a1 y a2 para una mejor comprensión.#${productnr}>.show#${ids[current_id[productnr]]} => seleccione el elemento con class .show e id #view_0 (o así sucesivamente según counter_id del control deslizante) debajo del elemento con id a1 (o a2) es decir, elemento deslizante. var ids = ["view_0", "view_1", "view_2", "view_3"] let current_id = { a1: 0, a2: 0 }; //image counter for each slider having the id as the key of slider function next(productnr) { let last_array_position = ids.length; let pic = document.querySelector(`#${productnr}>.show#${ids[current_id[productnr]]}`); pic.classList.remove("show"); current_id[productnr]++; if (current_id[productnr] >= last_array_position) { current_id[productnr] = 0; } document.querySelector(`#${productnr}>#${ids[current_id[productnr]]}`).classList.add("show"); } function prev(productnr) { let last_array_position = ids.length; let pic = document.querySelector(`#${productnr}>.show#${ids[current_id[productnr]]}`); pic.classList.remove("show"); current_id[productnr]--; if (current_id[productnr] < 0) { current_id[productnr] = last_array_position - 1; } document.querySelector(`#${productnr}>#${ids[current_id[productnr]]}`).classList.add("show"); } #a1 img { display: none; } #a1 img.show { display: block; } <article id="a1"> <img src="https://picsum.photos/id/1/200" class="show" id="view_0"></img> <img src="https://picsum.photos/id/2/200" id="view_1"></img> <img src="https://picsum.photos/id/3/200" id="view_2"></img> <img src="https://picsum.photos/id/4/200" id="view_3"></img> <button onclick="prev(`a1`)"><</button> <button onclick="next(`a1`)">></button> <article id="a2"> <img src="https://picsum.photos/id/50/200" class="show" id="view_0"></img> <img src="https://picsum.photos/id/60/200" id="view_1"></img> <img src="https://picsum.photos/id/70/200" id="view_2"></img> <img src="https://picsum.photos/id/80/200" id="view_3"></img> <button onclick="prev(`a2`)"><</button> <button onclick="next(`a2`)">></button> </article> </article>El atributo id define un identificador (ID) que debe ser único en todo el documento. En su código, está utilizando la misma ID para varios elementos.