JSFiddle - React, Tailwind, and code Playground

by Penguinlay

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div class="card">
  1
</div>

<div class="card">
  2
</div>

<div class="card">
  3
</div>

<div class="card">
  4
</div>

<div class="card">
  5
</div>

<div class="card">
  6
</div>

<div class="card">
  7
</div>

JavaScript

$(document).ready(function() {
  var first, prev, current, next, last;
  
  first = $(".card:first");
  last = $(".card:last");
  prev = last;
  current = first;
  next = first.next();
  
  $(".card").not(first).hide();
  
  $(document).keydown(function(e) {
    if(e.keyCode == 37) {
      next = current;
      current = prev;
      if(current == first)
        prev = last;
      else
        prev = current.prev();
      $(next).fadeOut(1);
    }

    if(e.keyCode == 39) {
      prev = current;
      if(current == last)
        current = first;
      else
        current = next;
      next = current.next();
      $(prev).fadeOut(1);
    }

    $(current).fadeIn(100);
  });
});