I'm experimenting with Royal Slide and trying to dynamically change the ID based on image changes. I've attempted using translateX values, but it's been challenging for me since I have limited experience with jQuery/JavaScript. However, I came across another idea when I saw this:
<div class="rsNav rsBullets">
<div class="rsNavItem rsBullet rsNavSelected"><span></span></div>
<div class="rsNavItem rsBullet"><span></span></div>
<div class="rsNavItem rsBullet"><span></span></div>
</div>
I thought utilizing the :nth-child selector would be the best approach, like so:
function colorfondo(){
if($('.RsNav:nth-child(1)').hasClass("RsNavselected")) {
console.log('works!');
}
Unfortunately, this method did not work as intended.
EDIT Perhaps my explanation was unclear. My objective is something like this:
if (the first child has the rsNavSelected) { do something.}
elseif the second child has the rsNavSelected) { do something.} elseif the third child has the rsNavSelected { do something.}
RE-EDIT I managed to make it work with the following function: function colorfondo(){
if($('.rsNav div:first-child').hasClass("rsNavSelected")) {
console.log('rojo!');
}
else if($('.rsNav div:nth-child(2)').hasClass("rsNavSelected")) {
console.log('azul!');
}
else if($('.rsNav div:nth-child(3)').hasClass("rsNavSelected")) {
console.log('gris!');
}
}
Now I am looking for suggestions on how to ensure this function runs continuously without stopping.