<section class="container">
  <figure id="imagen" class="original">
    <img src="https://raw.githubusercontent.com/NestorPlasencia/img/master/laptop.png">
  </figure>
</section>
<section class="container" id="filtros">
  <div class="nav" id="izq">◄</div>
  <figure class="preview" id="p1">
    <img src="https://raw.githubusercontent.com/NestorPlasencia/img/master/laptop-small.png">
    <div><p id="t1">FILTRO</p></div>
  </figure>
  <figure class="preview" id="p2">
    <img src="https://raw.githubusercontent.com/NestorPlasencia/img/master/laptop-small.png">
    <div><p id="t2">FILTRO</p></div>
  </figure>
  <figure class="preview" id="p3">
    <img src="https://raw.githubusercontent.com/NestorPlasencia/img/master/laptop-small.png">
    <div><p id="t3">FILTRO</p></div>
  </figure>
  <figure class="preview" id="p4">
    <img src="https://raw.githubusercontent.com/NestorPlasencia/img/master/laptop-small.png">
    <div><p id="t4">FILTRO</p></div>
  </figure>
  <div class="nav" id="der">►</div>
</section>

.container {
  width: 560px;
  margin: 0 auto;
  display: flex;
  background-color: #2A2A2A;
}

#imagen {
  width: 100%;
  margin: 10px;
}

img {
  width: 100%;
}

.preview {
  width: 100px;
  flex-grow: 4;
  margin: 0;
  position: relative;
}

.preview:hover {
  box-shadow: 0px 0px 20px #FFF;
  z-index: 3;
  cursor: pointer;
}

.preview div {
  width: 100%;
  top: 15px;
  left: 0px;
  position: absolute;
}

.preview p {
  font-family: Tahoma, Geneva, sans-serif;
  text-align: center;
  color: white;
  user-select: none;
}

.nav {
  width: 30px;
  color: white;
  text-align: center;
  line-height: 90px;
  user-select: none;
}

.nav:hover {
  box-shadow: inset 0px 0px 20px #FFF;
  cursor: pointer;
}

.aden {
  filter: hue-rotate(-20deg) contrast(0.9) saturate(0.85) brightness(1.2);
}

.inkwell {
  filter: sepia(0.3) contrast(1.1) brightness(1.1) grayscale(1);
}

.reyes {
  filter: sepia(0.22) brightness(1.1) contrast(0.85) saturate(0.75);
}

.gingham {
  filter: brightness(1.05) hue-rotate(-10deg);
}

.toaster {
  filter: contrast(1.5) brightness(0.9);
}

.walden {
  filter: brightness(1.1) hue-rotate(-10deg) sepia(0.3) saturate(1.6);
}

.hudson {
  filter: brightness(1.2) contrast(0.9) saturate(1.1);
}

.earlybird {
  filter: contrast(0.9) sepia(0.2);
}

.mayfair {
  filter: contrast(1.1) saturate(1.1);
}

.lofi {
  filter: saturate(1.1) contrast(1.5);
}

._1977 {
  filter: contrast(1.1) brightness(1.1) saturate(1.3);
}

.brooklyn {
  filter: contrast(0.9) brightness(1.1);
}

.xpro2 {
  filter: sepia(0.3);
}

.nashville {
  filter: sepia(0.2) contrast(1.2) brightness(1.05) saturate(1.2);
}

.lark {
  filter: contrast(0.9);
}

.moon {
  filter: grayscale(1) contrast(1.1) brightness(1.1);
}

.clarendon {
  filter: contrast(1.2) saturate(1.35);
}

.willow {
  filter: grayscale(0.5) contrast(0.95) brightness(0.9);
}

.rise {
  filter: brightness(1.05) sepia(0.2) contrast(0.9) saturate(0.9);
}

.slumber {
  filter: saturate(0.66) brightness(1.05);
}

.brannan {
  filter: sepia(0.5) contrast(1.4);
}

.valencia {
  filter: contrast(1.08) brightness(1.08) sepia(0.08);
}

.maven {
  filter: sepia(0.25) brightness(0.95) contrast(0.95) saturate(1.5);
}

var filtros = ["original", "lofi","brannan","clarendon", "aden", "reyes", "hudson", "inkwell", "gingham", "toaster", "walden", "earlybird", "mayfair", "_1977", "brooklyn", "xpro2", "nashville", "lark", "moon", "willow", "rise", "slumber", "valencia", "maven"];
var inicial = 0;

$(document).ready(function() {
  llenar(inicial);
});

function llenar(valor) {
  for (i = 1; i <= 4; i++) {
    $('#p' + i).removeClass();
    $('#p' + i).addClass('preview ' + filtros[valor + i - 1]);
    $('#t' + i).html(filtros[valor + i - 1].toUpperCase());
  }
}

$('.nav').on('click', function() {
  if ($(this).attr("id") == "izq") {
    if (inicial > 0) {
      inicial = inicial - 1;
      llenar(inicial);
    }
  }
  if ($(this).attr("id") == "der") {
    if (inicial < 20) {
      inicial = inicial + 1;
      llenar(inicial);
    }
  }
});

$('.preview').on('click', function() {
  let num = parseInt($(this).attr("id").substring(1, 2));
  $('#imagen').removeClass();
  $('#imagen').addClass(filtros[inicial + num - 1]);
});