JSFiddle - React, Tailwind, and code Playground

HTML

<div id="carousel">
    <div id="carousel-images">
        <ul style="left: 0px;">	
	        <li class="timer" style="">
                <img alt="" src="https://placekitten.com/134/70">
            </li>
            <li class="timer" style="">
                <img alt="" src="https://placekitten.com/134/70">
            </li>
            <li class="timer" style="">
               <img alt="" src="https://placekitten.com/134/70">
            </li>
            <li class="timer" style="">
                <img alt="" src="https://placekitten.com/134/70">
            </li>
            <li class="timer" style="">
             <img alt="" src="https://placekitten.com/134/70">
            </li>
            <li class="timer" style="">
                <img alt="" src="https://placekitten.com/134/70">
            </li>
            <li class="timer" style="">
                <img alt="" src="https://placekitten.com/134/70">
            </li>
            <li class="timer" style="">
                <img alt="" src="https://placekitten.com/134/70">
            </li>
            <li class="timer" style="">
                <img alt="" src="https://placekitten.com/134/70">
            </li>
            <li class="timer" style="">
                <img alt="" src="https://placekitten.com/134/70">
            </li>
            <li class="timer" style="">
                <img alt="" src="https://placekitten.com/134/70">
            </li>
            <li class="timer" style="">
              <img alt="" src="https://placekitten.com/134/70">
            </li>
        </ul>    
    </div>                
</div>

CSS

.orbit-timer {
  display: none; }

#carousel {
  width: 100%;
  overflow: hidden;
  margin: 15px 0; }

/*Add Media query. If less than 600 then change to 90%*/
#carousel #carousel-images {
  width: 95%;
  overflow: hidden;
  display: inline-block; 
}

#carousel ul {
  position: relative;
  width: 1200px;
  height: 70px;
  margin: 0 0 0 0;
  padding: 0 0 0 0; 
}

#carousel ul li {
  display: inline;
  position: relative; 
}

JavaScript

$(".timer").css("display");
    $(".timer:gt(5)").css("display", "none");
    function move_first() {
        //console.debug("animate");
        $(".timer").eq(0).stop().animate({
            opacity: 0.00,
            width: "toggle"
        }, 500, function() {
            $(this).insertAfter($(".timer").eq(-1));
            $(this).css('opacity', '1');
            $(".timer").eq(5).animate({
                opacity: 1.00,
                width: "toggle"
            }, 500, function() {
                $(".timer").css("display");
                $(".timer:gt(5)").css("display", "none");
            });
        });

        setTimeout(move_first, 3000);
    }

    move_first();