JSFiddle - React, Tailwind, and code Playground

by Charles Butler

HTML

<div id="next" class="nav">next</div>
<div id="prev" class="nav">prev</div>
<div class="media-header">
  <div id="media">
    <table id="wpsm-table-1" class="wpsm-comptable center-table-align">
      <thead class="wpsm-thead wpsm-thead-orange">
        <tr>
          <th>Race 1</th>


          <th>Race 2</th>


          <th>Race 3</th>


          <th>Race 4</th>


          <th>Race 5</th>


          <th>Race 6</th>


          <th>Race 7</th>


          <th>Race 8</th>


          <th>Race 9</th>


          <th>Race 10</th>


          <th>Race 11</th>


          <th>Race 12</th>


        </tr>
      </thead>
      <tbody class="wpsm-tbody">
        <tr>
          <td class=""> 1,4,2 </td>
          <td class=""> 4,1,5 </td>
          <td class=""> 3,1,2 </td>
          <td class=""> 2,1,4 </td>
          <td> 7,1,2 </td>
          <td class=""> 8,3,4 </td>
          <td class=""> 6,1,3 </td>
          <td class=""> 1,3,9 </td>
          <td> 3,1,2 </td>
          <td> 5,3,7 </td>
          <td> 6,3,2 </td>
          <td> 2,8,1 </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS

#next {
  position: fixed;
  bottom: 10px;
  left: 10px;
  cursor: pointer;
}

#prev {
  position: fixed;
  bottom: 10px;
  left: 45px;
  cursor: pointer;
}

td {
  width: 220px !important;
}

.media-header {
  max-width: 100px;
  position: relative;
  overflow: auto;
}

JavaScript

var currentIdx = 0;
jQuery.easing.def = "easeInOutQuad";
$("#next").click(function() {

  //$(this).animate(function(){
  $('html, body, .media-header').animate({
    scrollLeft: $("td").eq(currentIdx + 1).offset().left
  }, 600);
  currentIdx++;
  //});
});
jQuery.easing.def = "easeInOutQuad";
$("#prev").click(function() {

  //$(this).animate(function(){
  $('html, body, .media-header').animate({
    scrollLeft: $("td").eq(currentIdx - 1).offset().left
  }, 600);
  currentIdx--;
  //});
});