0

Tengo un problema.vi en un video como hacer un slider con tailwind css y javascript , y todo bien hasta entonces. pero , cuando quiero tener varios de estos , pues chocan y no funcionan. como podria resolver esto sin tener que hacer un archivo js para cada slider.

este es mi codigo javascript :

let sliderContainer = document.getElementById('sliderContainer');
let slider = document.getElementById('slider');
let cards = slider.getElementsByTagName('li');
let sliderContainerwidth = sliderContainer.clientWidth;
let elementsToShow =elemento();

function elemento(elementsToShow){
    
    if (document.body.clientWidth < 601) {
        elementsToShow=1;
} else if (document.body.clientWidth < 1000) {
    elementsToShow = 2;

} else if (document.body.clientWidth < 1500) {
    elementsToShow = 3;
}else{
    elementsToShow=4
}
return  elementsToShow
}

let carWidth = sliderContainerwidth / elementsToShow;

slider.style.width = cards.length * carWidth + 'px';
slider.style.transition = 'margin';
slider.style.transitionDuration = '1.5s';

for (let index = 0; index < cards.length; index++) {
    const element = cards[index];
    element.style.width = carWidth + 'px';
}
function prev() {
    if (slider.style.marginLeft.slice(0, -2) != -carWidth * (cards.length - elementsToShow))
        slider.style.marginLeft = ((+slider.style.marginLeft.slice(0, -2)) - carWidth) + 'px';//100px
}
function next() {
    if (slider.style.marginLeft.slice(0, -2) != 0)
        slider.style.marginLeft = (+slider.style.marginLeft.slice(0, -2) + carWidth) + 'px';//100px
}

4
  • ¿Para cada slider utilizas un ID diferente? Recuerda que los id's deben de ser únicos
    – Jozaguts
    el 13 ago. 2022 a las 17:31
  • si , tiene uno diferente , pero debo cambiar el valor de las variables y hacer el procedimiento de nuevo para cada slider? el 13 ago. 2022 a las 17:41
  • Por favor, aclara tu problema específico o proporciona detalles adicionales para resaltar exactamente lo que necesitas. Tal como está escrito, es difícil saber exactamente qué estás preguntando.
    – Comunidad Bot
    el 14 ago. 2022 a las 7:58
  • Aunque cambies los ids y sean únicos las variables que usas para manejar el slider son las mismas, por eso te entra en conflicto. Lo más chapucero sería que cambiaras el nombre de las variables en todo el código a otro diferente y repitas el código pero no sería lo más limpio por así decirlo
    – David
    el 15 ago. 2022 a las 16:15

1 respuesta 1

0

Crea una función a la cual le puedas pasar el parámetro que necesitas en este caso el ID del container te recomiendo hacerlo en forma de objeto por si en el futuro quieres agregar más parámetros se te sea más fácil hacerlo

Ejemplo:

function initSlider({sliderId}) {
  let sliderContainer = document.getElementById(sliderId);
    // el resto de tu codigo ...
    }

    initSlider('sliderId1')

    initSlider('sliderId2')

    initSlider('sliderId3')

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.