I want to change the one of the bubbles navigation to active when a div class is active with background image as style. Here is the sample code
jQuery(document).ready(function() {
var i=0;
var ba=['#screen0','#screen1','#screen2','#screen3','#screen4','#screen5','#screen6','#screen7','#screen8'];
var id_0= $('#screen0');
var id_1= $('#screen1');
var id_2= $('#screen2');
var id_3= $('#screen3');
var id_4= $('#screen4');
var id_5= $('#screen5');
var id_6= $('#screen6');
var id_7= $('#screen7');
var id_8= $('#screen8');
var id_9= $('#screen9');
function checkk(){
if($('#screen_1').attr('class', 'swiper-slide swiper-slide-active'))
{
console.log('screen_1 is active');
for(i=0; i<ba.length; i++){
ba[i].removeClass('active');
}
$('#screen0').attr('class', 'active');
}
else if($('#screen_2').attr('class', 'swiper-slide swiper-slide-active'))
{
console.log('screen_2 is active');
for(i=0; i<ba.length; i++){
ba[i].removeClass('active');
}
$('#screen1').attr('class', 'active');
}
else if($('#screen_3').attr('class', 'swiper-slide swiper-slide-active'))
{
console.log('screen_3 is active');
for(i=0; i<ba.length; i++){
ba[i].removeClass('active');
}
$('#screen2').attr('class', 'active');
}
else if($('#screen_4').attr('class', 'swiper-slide swiper-slide-active'))
{
console.log('screen_4 is active');
for(i=0; i<ba.length; i++){
ba[i].removeClass('active');
}
$('#screen3').attr('class', 'active');
}
else if($('#screen_5').attr('class', 'swiper-slide swiper-slide-active'))
{console.log('screen_5 is active');
for(i=0; i<ba.length; i++){
ba[i].removeClass('active');
}
$('#screen4').attr('class', 'active');
}
else if($('#screen_6').attr('class', 'swiper-slide swiper-slide-active'))
{console.log('screen_6 is active');
for(i=0; i<ba.length; i++){
ba[i].removeClass('active');
}
$('#screen5').attr('class', 'active');
}
else if($('#screen_7').attr('class', 'swiper-slide swiper-slide-active'))
{
console.log('screen_7 is active');
for(i=0; i<ba.length; i++){
ba[i].removeClass('active');
}
$('#screen6').attr('class', 'active');
}
else if($('#screen_8').attr('class', 'swiper-slide swiper-slide-active'))
{ console.log('screen_8 is active');
for(i=0; i<ba.length; i++){
ba[i].removeClass('active');
}
$('#screen7').attr('class', 'active');
}
else if($('#screen_9').attr('class', 'swiper-slide swiper-slide-active'))
{ console.log('screen_9 is active');
for(i=0; i<ba.length; i++)
{
ba[i].removeClass('active');
}
$('#screen8').attr('class', 'active');
}
}
setTimeout(checkk(), 50);
// Stall the bubble and content changing for just 300ms
});
<div class="swiper-slider-area"><div class="container"><div class="row appScreenshotCarousel-container swiper-container"><div class="screen-mobile-image"></div><div class="swiper-wrapper"><div class="swiper-slide" id="screen_1" style="background-image:url(img/screenshot_1.png)"></div><div class="swiper-slide" id="screen_2" style="background-image:url(img/screenshot_2.png)"></div><div class="swiper-slide" id="screen_3" style="background-image:url(img/screenshot_3.png)"></div><div class="swiper-slide" id="screen_4" style="background-image:url(img/screenshot_4.png)"></div><div class="swiper-slide" id="screen_5" style="background-image:url(img/screenshot_5.png)"></div><div class="swiper-slide" id="screen_6" style="background-image:url(img/screenshot_7.png)"></div><div class="swiper-slide" id="screen_7" style="background-image:url(img/screenshot_8.png)"></div><div class="swiper-slide" id="screen_8" style="background-image:url(img/screenshot_9.png)"></div><div class="swiper-slide" id="screen_9" style="background-image:url(img/screenshot_10.png)"></div></div><!-- Add Arrows --></div><!-- </div> --></div><!-- End container --></div><!-- End swiper-slider-area --><div class="bubbles"><div class="bubble" id="screen0"></div><div class="bubble" id="screen1"></div><div class="bubble" id="screen2"></div><div class="bubble" id="screen3"></div><div class="bubble" id="screen4"></div><div class="bubble" id="screen5"></div><div class="bubble" id="screen6"></div><div class="bubble" id="screen7"></div><div class="bubble" id="screen8"></div></div>
In the above snippet I have a phone modal as an image inside which a screenshot is placed and it changes to next image when user slides the active image to left or right. based on this action I want to change the bubble color to dark using Jquery. I have tried using div id and the change the bubble class to active but no result.