Text slider outputs jumbled text

I’m facing an issue with a text slider on a webpage. The slider outputs jumbled text, meaning the texts on each slide appear together at once, rather than one at a time. This is the case particularly with Mozilla and Edge. With Chrome and Safari the issue isn’t there. I think my code is the problem. I am not a programmer by any means. I got this code from the internet years back and it worked fine for years.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
jQuery.noConflict();
jQuery(document).ready(function(){ 
jQuery("#blurbtext > div:gt(0)").hide();
setInterval(function() { 
  jQuery('#blurbtext > div:first')
    .fadeOut(500)
    .next()
    .fadeIn(500)
    .end()
    .appendTo('#blurbtext');
},  9000);
});
</script>

What am I doing wrong? What can I tweak to make the text appear consistently across all browsers? Thank you!

You will have to post a more complete example. You can use Codepen.


Are you sure you want the :first CSS pseudo-class? It doesn’t seem right and it is not supported in Firefox.

Maybe you wanted :first-child?

1 Like

Seconded even though I ran the code on my machine’s Firefox and it worked just fine, which is surprising considering :first shouldn’t work.

Anyway, it seems the selector isn’t working at all in the example but using :first-child would make the script function as expected.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.