tengo una sección de imagen en mi sitio web que está dentro de un control deslizante, el control deslizante tiene 4 diapositivas, así que ahora también quiero deslizar esa imagen, así que hice el siguiente código:
function changeStyle() { $('.animate-left').removeClass('active') setTimeout(() => { $('.animate-left').addClass(' active') }, 1000) } const time = setInterval(changeStyle, 6300) function changeStyle2() { $('.bg-shape').removeClass('bgactive') setTimeout(() => { $('.bg-shape').addClass('bgactive') }, 7000) } const time2 = setInterval(changeStyle2, 14000) #bg1 { float: left; left: 0; background-image: url('assets/slider1.2.png'); } #bg1.bgactive { background-image: url('assets/slider4.2.png'); } <div class="animate-left active"> <div class="bg-shape" id="bg1"> </div> </div>esto está funcionando bien, ahora agregué la tercera imagen e hice lo siguiente:
function changeStyle3() { $('.bg-shape').removeClass('bgactive1') setTimeout(() => { $('.bg-shape').addClass('bgactive1') }, 14000) } const time3 = setInterval(changeStyle3, 21000) #bg1.bgactive { background-image: url('assets/slider3.2.png'); }sin embargo, la tercera imagen no se desliza ni se muestra en absoluto, aquí está el enlace en vivo
¿alguien puede decirme qué está mal aquí, gracias de antemano?