JSFiddle - React, Tailwind, and code Playground

HTML

<img src="">
    <br>
    <button id="left">left</button>
    <button id="right">right</button>

JavaScript

$(function(){
    
    arr = [{
    'logo': 'http://placehold.it/50&text=1'
},

{
    'logo': 'http://placehold.it/50&text=2'
},

{
    'logo': 'http://placehold.it/50&text=3'
},

{
    'logo': 'http://placehold.it/50&text=4'
}

];

$('img').attr('src',arr[0]['logo']);
    
var i = 1;    
    $('#right').click(function(){
         if(!$(this).hasClass("active"))
               {
                   i=i+1;
                   $("#left").removeClass("active");
               }
        if(i == 4)
        {
            i=0;
        }
        $('img').attr('src',arr[i]['logo']);
        i++;
        $(this).addClass("active");
        
    });
    $('#left').click(function(){
            if(!$(this).hasClass("active"))
               {
                   i=i-1;
                   $("#right").removeClass("active");
               }
        
        if(i == 0)
        {
            i=4;
        }
        $('img').attr('src',arr[i-1]['logo']);
        i--;
        $(this).addClass("active");
    });
});