JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <div id="selector">
      <span id="goleft">&lt;=</span>
      <div style="width:500px;">
          <span class="blue"></span>
          <span class="yellow"></span>
          <span class="red"></span>
      </div>
      <span id="goright">=&gt;</span>
  </div>
</div>

CSS

.blue
{
  display:inline-block;
  background-color:blue;
  width:200px;
  height:200px;
}

.yellow
{
  display:inline-block;
  background-color:yellow;
  width:200px;
  height:200px;
}

.red
{
  display:inline-block;
  background-color:red;
  width:200px;
  height:200px;
}

JavaScript

$(document).ready(function() {
      //Set the last (red) image to be hidden
      $("#selector div span:visible").last().hide();
      // If we click left, hide the first one and show the last one
      $("#goleft").click(function(){
        $("#selector div span:visible").first().hide('slow', function()
        {
          $("#selector div span:hidden").last().show('slow')
        }
        )
      });
      // Similar for right
      $("#goright").click(function(){
        $("#selector div span:visible").last().hide('slow', function()
        {
          $("#selector div span:hidden").first().show('slow')
        })
      });
    });