JSFiddle - React, Tailwind, and code Playground

HTML

<div id="images">
    <div>
        <img src="http://brightcove04.o.brightcove.com/1362235914001/1362235914001_4806146059001_video-still-for-video-4805957335001.jpg?pubId=1362235914001" />
        <img src="https://oup.useremarkable.com/production/images/uploads/3315/original/email-symbol-thumbnail.jpg?1473424084" />
        <img src="https://i.ytimg.com/vi/xYrRq5U5kcc/maxresdefault.jpg" />
        <img src="https://oup.useremarkable.com/production/images/uploads/2998/original/plus-sign-thumbnail.jpg?1471959737" />
        <img src="https://oup.useremarkable.com/production/images/uploads/2816/original/crossword-thumbnail.jpg?1471959676" />
    </div>
</div>
  
<div class="row" id="randomizer">

    <div class="wheel">
        <div>
            <img src="https://i.imgur.com/ikch8mX.jpg" />
        </div>
    </div>

</div>

CSS

:root {
  --spinner-animation-time: 200ms;
}

.row {
    overflow: hidden;
    width: 33.333333%;
}

#randomizer {
    height: 12vh;
    margin-top: 0.1vh;
    position: relative;
    z-index: 4;
}

    #randomizer .wheel {
        -webkit-border-top-left-radius: 0;
        -webkit-border-top-right-radius: 0;
        -moz-border-radius-topleft: 0;
        -moz-border-radius-topright: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-top: none !important;
        padding: 2vh 0 1.5vh 0;
    }

    #randomizer .wheel > div {
        height: 8.4vh;
        overflow: hidden;
        position: relative;
        -webkit-transform: translate3d( 0, 0, 0 );  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translate3d( 0, 0, 0 );  /* IE 9 */
                transform: translate3d( 0, 0, 0 );  /* Firefox 16+, IE 10+, Opera */
        width: 95vw; /** 4 white blocks with their black borders visible */
    }

        #randomizer .wheel img {
            cursor: pointer;
            object-fit: cover;
            position: relative;
            top: 0.1vh;
            width: 55vw;
        }

            /*#randomizer .wheel img:hover {
                animation: randomizer 100ms 10;
            }*/
            
#images {
  align-items: center;
  border: 1px solid #000;
  display: inline-flex;
  justify-content: center;
  height: 300px;
  margin-top: 6vh;
  position: absolute;
  width: 450px;
  z-index: 3;
}

#images div {
  display: inline-flex;
  height: 100%;
  overflow: hidden;
  width: 100%;
}

    #images img {
      /*clip-path: inset( 9.2vh 1.2vw 24.5vh 4.7vw );*/
      /*transform: scale( 0.8, 1 );*/
      height: 100%;
      width: 100%;
    }

    #images .spinning img {
      animation: randomizer var(--spinner-animation-time) 25;
    }

#randomizer .wheel > div.spinning img {
  animation: randomizer var(--spinner-animation-time) 25;
}

@keyframes randomizer {
  100% {
    -webkit-transform: translateX(...

JavaScript

$( document ).ready( function() {

  $( '#randomizer .wheel' ).on( 'click', function() {

      /**
       * @internal
       *
       * 70 is the upper bound of the range and 50 the lower bound
       *
       * @see https://stackoverflow.com/a/7228322/5613506
       */
      var time = Math.floor( Math.random() * ( 70 - 50 + 1 ) + 50 );

      var selector = $( '#randomizer .wheel div, #images > div' );

      selector.addClass( 'spinning' )
              .css( '--spinner-animation-time', time + 'ms' )
              .on( 'animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function() {
                  selector.removeClass( 'spinning' )
              });
  });
});