Comprobar click de multiples elementos

[kodaichi]

Iniciado por siddartha23

Yo lo resolvería usando Programación Orientada a Objetos, que básicamente es: generar un objeto llamado Slider, definirle sus parámetros y métodos. Luego puedes instanciar cuantos slider quieras y cada uno va funcionar independiente del otro...

Buen punto, parece que es un buen momento para aprender opp.

He estado leyendo sobre el tema, pero podrías darme un pequeño ejemplo?

Saludos.

Alexis88, gracias por la respuesta pero creo que no me explique bien, yo ya tengo un slider, lo puedes ver [URL="http://codepen.io/GhostOrder/pen/xgZOao"]aquí[/URL], y creo que tu código también hace lo mismo. Mi problema es que necesito agregar más sliders en en una misma página, las imágenes de cada slider tienen una ruta distinta.

Lo que quiero hacer es algo como esto:

Código HTML:

<section id="productos">
  <div class="slider">
    <img src="img/slider-productos_img1.png"/>
      <ul class="carousel-index">
        <li></li>
        <li></li>
        <li></li>                       
      </ul>
    </div>
</section>
 
<section id="servicios">
  <div class="slider">
    <img src="img/slider-servicios_img1.png"/>
      <ul class="carousel-index">
        <li></li>
        <li></li>
        <li></li>                       
      </ul>
    </div>
</section>
 
<section id="otra-seccion">
  <div class="slider">
    <img src="img/otra-seccion_img1.png"/>
      <ul class="carousel-index">
        <li></li>
        <li></li>
        <li></li>                       
      </ul>
    </div>
</section>
 

Actualmente tengo un código funcional(el que esta en el codepen) pero es aplicable a un solo slider:

Código Javascript:

var listItemContainer = document.getElementById('carousel-index');
var imageChanger = document.getElementById('image-container').getElementsByTagName('img');
var bulletNumber;
 
for (i = 0; i < listItemContainer.children.length; i++) {
  (function(index) {
    listItemContainer.children[i].onclick = function() {
      bulletNumber = index;
      imageChanger[0].className = "fade-out";       
      setTimeout(function(){ 
        imageChanger[0].setAttribute('src', 'https://civilian-interviewe.000webhostapp.com/img/mini_slider_' + (bulletNumber + 1) + '.png');
      }, 201);       
      setTimeout(function(){ 
        imageChanger[0].className = "fade-in";
      }, 401);      
    }
  })(i);
};
 

Como ves, si quisiese replicar esta función a cuantos slider crease en mi html, lo único que cambiaría sería la ruta de la imagen, y siendo ese el caso, pienso que mediante un condicional se podría comprobar en que bullet de que slider se hizo click y luego cambiar la ruta de la imagen.

Por ejemplo:

- Si se hizo click en el bullet 3 del slider 'productos', entonces cambiar la ruta de imagen usando el nombre 'slider-productos', de manera que la ruta completa sería 'slider-productos_img3.png'.
- Pero si se hizo click en el bullet 2 del slider 'servicios', entonces cambiar la ruta de la imagen usando el nombre 'slider-servicios', de manera que la ruta completa sería 'slider-servicios_img2.png'.

Saludos.