i have an image section in my website which is inside a slider, the slider has 4 slides, so now i want to slide that image also , so i did the following code:
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>this is working fine, now i added the third image and did the following:
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');
}however the third image doesnt slide or show at all, here is the live link
can anyone please tell me what is wrong in here, thanks in advance