Hola a todos, estoy aprendiendo javascript por mi cuenta y me he topado con un problema al que, por más que busco, no le hallo solución.
Tengo un slider de imágenes con transiciones, en el cual cambio el nombre de la ruta de imagen dependiendo del número de bullet en el que se haya hecho click.
Ej. 'click' en bullet 3 = Cambiar imagen a slider_img3.png
[URL="http://codepen.io/GhostOrder/pen/xgZOao"]Aquí[/URL] dejo el codepen de mi slider:
Hasta aquí todo bien.
El problema viene cuando tengo que añadir mas sliders en la misma pagina pero cada grupo de imágenes tiene un prefijo distinto en su nombre, por ejemplo:
Slider1 : slider1_img1.png, slider1_img2.png, slider1_img3.png
Slider2 : slider2_img1.png, slider2_img2.png, slider2_img3.png
Siendo que la única diferencia en mi función para cambiar imágenes es el nombre de la ruta de imagen, me gustaría usar una sola función que, mediante un condicional, compruebe en que slider se ha hecho clic y dependiendo del resultado cambie el nombre de la ruta de imagen.
No se si me explico bien.
Este fue mi intento y obviamente fallo:
Código javascript
:
Ver originalvar aboutSectionListItems = document.getElementsByClassName('carousel-index')[0].children; // Lista de bullets del slider 'about'
var helpSectionListItems = document.getElementsByClassName('carousel-index')[1].children; // Lista de bullets del slider 'help'
var imageChanger = document.getElementById('image-container').getElementsByTagName('img'); // elemento <img>
var bulletList = [aboutSectionListItems, helpSectionListItems]; //Array con todos los bullets
var bulletNumber; //Variable con la que se cambia el nombre de la imagen, dependiendo en que número de bullet se haya hecho click.
for(i = 0; i < bulletList.length; i++){// basicamente 'i' representa a los contenedores de los bullet del slider
(function(index){
for (j = 0; j < bulletList[i].length; j++) {// 'j' representa a los bullets
var _bulletListSelf = bulletList[i][j];
bulletList[i][j].onclick = function(){
bulletNumber = index;
imageChanger[0].className = "fade-out";
setTimeout(function (){
if(onclick.target == _bulletListSelf[0][j]){// Si se hace click en algun bullet del slider 'about',
//entonces cambiar la ruta de imagen usando el prefijo 'img/about_slider_'
imageChanger[0].setAttribute('src', 'img/about_slider_' + (bulletNumber + 1) + '.png');
}if(onclick.onclick == _bulletListSelf[1][j]){// Si se hace click en algun bullet del slider 'help',
//entonces cambiar la ruta de imagen usando el prefijo 'img/help_slider_'
imageChanger[0].setAttribute('src', 'img/help_slider_' + (bulletNumber + 1) + '.png');
}
}, 201);
setTimeout(function (){
imageChanger[0].className = "fade-in";
}, 401);
}
}
})(i);
}
Se que la solución más fácil podría sería usar una función para cada slider, pero entonces estaría repitiendo el código muchas veces, prefiero buscar una manera de simplificar e código y hacerlo fácil de mantener.
Como comento en el código, mi idea es comprobar en que bullet se ha hecho click y cambiar la ruta de la imagen dependiendo del resultado.
Si no me explique bien por favor decírmelo, llevo mucho tiempo intentado resolver esto así que estaría muy agradecido si pudieran brindarme ayuda.
Saludos.