JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    
      <div id="nav">
    
        <button id="prev" disabled>&lt;&lt;&lt;</button>
    
        <button id="next">&gt;&gt;&gt;</button>
    
      </div>
    
      <div id="mask">
    
        <div id="item1" class="item">
    
          <a name="item1"></a>
    
          <div class="content">
    
            <img id="image1" src="http://placehold.it/350x150"/>
    
    <img id="image2" src="http://placehold.it/350x150"/>
    
    <img id="image3" src="http://placehold.it/350x150"/>
    
    <img id="image4" src="http://placehold.it/350x150"/>
    
    <img id="image5" src="http://placehold.it/350x150"/>
    
    <img id="image6" src="http://placehold.it/350x150"/>
    
    <img id="image7" src="http://placehold.it/350x150"/>
    
    <img id="image8" src="http://placehold.it/350x150"/>
    
    <img id="image9" src="http://placehold.it/350x150"/>
    
    <img id="image10"src="http://placehold.it/350x150"/>
    
          </div>
    
        </div>
    
        <div id="item2" class="item">
    
          <div class="content">
    
            <img id="image1" src="http://placehold.it/350x150"/>
    
    <img id="image2" src="http://placehold.it/350x150"/>
    
    <img id="image3" src="http://placehold.it/350x150"/>
    
    <img id="image4" src="http://placehold.it/350x150"/>
    
    <img id="image5" src="http://placehold.it/350x150"/>
    
    <img id="image6" src="http://placehold.it/350x150"/>
    
    <img id="image7" src="http://placehold.it/350x150"/>
    
    <img id="image8" src="http://placehold.it/350x150"/>
    
    <img id="image9" src="http://placehold.it/350x150"/>
    
    <img id="image10"src="http://placehold.it/350x150"/>
    
          </div>
    
        </div>
    
        
    
      </div>
    
    </div>

CSS

#wrapper {
    
      width: 100%;
    
      height: 350px;
    
      /*position: absolute;*/
    
      top: 0;
    
      left: 0;
    
      background-color: white;
    
      overflow: hidden;
    
    }
    
    #nav button {
    
      position: absolute;
    
      top: 100px;
    
    }
    
    #prev {
    
      left: 40px;
    
    }
    
    #next {
    
      right: 40px;
    
    }
    
    #mask {
    
      width: 5000px;
    
      height: 100%;
    
      background-color: white;
    
    }    
    
    .item {
    
        width: 1200px;
    
        height: 100%;
    
        float: left;
    
        background-color: white;
    
    }
    
    .content img {
    
        height: 100px;
    
        width: 100px;
    
        float:left;
    
        margin-right: 10px;
    
        margin-bottom: 10px;
    
    }
    
    .content {
    
        width: 50%;
    
        height: 220px;
    
        top: 20%;
    
        margin: auto;
    
        background-color: white;
    
        position: relative;
    
    }       
    
    .content a {
    
        position: relative;
    
        top: -17px;
    
        left: 170px;
    
    }
    
    .selected {
    
        background: #fff;
    
        font-weight: 700;
    
    }
    
    .clear {
    
        clear:both;
    
    }

JavaScript

$(document).ready(function () {

  function shift(direction) {

    var 

      $mask = $('#mask'),  

      items = $('.item').size(),

      currentItem = $mask.data('currentItem'),

      newItem;

    

    if (currentItem == undefined) {

      currentItem = 0;

    }

    

    newItem = currentItem + direction;

    $mask.data('currentItem', newItem).animate({marginLeft: -1200 * newItem});

    

    if (newItem == 0) {

      $("#prev").prop('disabled', true);

    } else {

      $("#prev").prop('disabled', false);

    }    

    if (newItem == items - 1) {

      $("#next").prop('disabled', true);

    } else {

      $("#next").prop('disabled', false);

    }

  }

  

  $('#prev').click(function() {

    return shift(-1);

  });

  $('#next').click(function() {

    return shift(1);

  });

});