JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" value="Show Next Image" />
<br/><br/>
<div id="gallery"></div>

CSS

.home {
width:46px;
height:44px;
background:url('http://i.imgur.com/vPDBk.gif') 0 0; }

.next {
width:43px;
height:44px;
background:url('http://i.imgur.com/vPDBk.gif') -47px 0; }

.prev {
width:43px;
height:44px;
background:url('http://i.imgur.com/vPDBk.gif') -91px 0; }

JavaScript

$(function() {
    
      // The sprite classes
    var sprites = ["home", "next", "prev"];
    
      // Which image is showing
    var showing = 0;
    
      // Show the first image
    $("#gallery").addClass(sprites[showing]);
    
    $("input").click(function() { 
        
          // Cycle through images by making use of sprites
        $("#gallery").attr("class", sprites[(++showing % sprites.length)]);
    });
});