JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bgStretch">aaaa
    <img id="bgStretchimg" src="http://www.antisocialmediallc.com/wp-content/uploads/2012/02/Right-Arrow-Icon.jpg" alt=""></img>
</div>
<!-- here is the image src i want to change-->
<nav class="bgNav">
    <ul>
        <li class="active"><a href="http://www.antisocialmediallc.com/wp-content/uploads/2012/02/Right-Arrow-Icon.jpg"></a>

        </li>
        <li><a href="http://absolutraining.com/atwp/wp-content/uploads/2012/02/left-arrow-icon.jpg"></a>

        </li>
    </ul>
</nav>

CSS

.active {
    background-color: red;
}
img {
    width: 50px;
    height: 50px;
}

JavaScript

$(document).ready(function () {


     var items = $("nav.bgNav ul");
     var img = $("#bgStretchimg");
    
     next();
     
     function next() {

         var urlI = items.children('.active').children("a").attr('href');

         var nextI = items.children('li.active').removeClass("active").next();
         if (nextI.length == 0) {
             nextI = items.children().eq(0);
         }
         
         nextI.addClass('active');
         img.attr('src', urlI);
         
         // schedule next iteration
         setTimeout(function () {
             next();
         }, 1000);
     }
 });