Адаптивная фото-галерея на jQuery

  <div class="fotobox"> 
    <div class="leftControl"><</div>
    <div class="rightControl">></div>
      <img src="https://kapu.cat/img/wlp/1.jpg">
      <img src="https://kapu.cat/img/wlp/2.jpg">
      <img src="https://kapu.cat/img/wlp/3.jpg">
      <img src="https://kapu.cat/img/wlp/4.jpg">
      <img src="https://kapu.cat/img/wlp/5.jpg">
      <img src="https://kapu.cat/img/wlp/6.jpg">
      <img src="https://kapu.cat/img/wlp/7.jpg">
  </div>

.fotobox{
  position: relative; /* позишн - релятиве */
  overflow: hidden; /*будем обрезать всё, что так или иначе не влезло*/
  background-color: #000; /* афро-американский фон*/
  text-align: center; /* так как фотки у меня в img а не всякими модными бэкграунд-аймэджами - это самый простой способ их отцентровать*/
  width: 900px; /*ну тут ясно*/
  height: 600px; /* тут тоже*/
  border: 1px solid black; /* на всякий случай*/
  border-radius: 10px; /* закруглим углы*/
  transition: all 1s; /* а вдруг анимация будет какая... пропишем уж сразу*/
}
@media screen and (max-width: 400px){ /*медиа-запрос под экраны мельче 400 пикселей (телефон в вертикальном виде, к примеру*/
  .fotobox{
  width: 300px;
  height: 200px;
  }
}
@media screen and (max-width: 700px){ /*тодж телефон в горизонтальном виде */
  .fotobox{
  width: 450px;
  height: 300px;
  }
}

/* кнопочки одинаково круглые, и имеют много общих черт, по этому стили одинаковые для обеих сразу*/
.leftControl, .rightControl{
 position: absolute; /* родитель - релятив, значит ребёнки - абсолют (чтоб разбежались в разны стороны потом)*/
  top: 40%; /* сверьху отступ*/
  z-index: 1; /* кнопки поверх фоток*/
  display: inline-block; /*на одной линии кнопки*/
  background-color: rgba(0,0,0,.5); /* полупрозрачные*/
  color: #fff; /* текст белый*/
  text-decoration: none; /* безо-всяких-там*/
  font-size: 40px; /* покрупней шрифт*/
  padding: 1.8% 3%; /* отступы */
  vertical-align: middle; // и шоб отцентровать на всякий случай*/
  cursor: pointer; /* чтоб обозначить кликабельность*/
  border-radius: 50%; /* скруглим квадрат*/
}
.leftControl{left: 1%;} /* а теперь одну кнопку влево*/
.rightControl{right: 1%;} /* а другую вправо*/
 
.leftControl:hover{ /* при наведении по-темней хай будет */
  background-color: rgba(0,0,0,.9);
}
.rightControl:hover{
  background-color: rgba(0,0,0,.9);
}

.fotobox img{
  width: auto;
  height: 100%;
  opacity: 0;  
}

$(window).resize(function() {
  var boxW = parseInt($(window).width()); // ширину экрана измеряли
  if (boxW > 900) {
    $(".fotobox").css({ width: "900px", height: "600px" }); // если больше 900 - то вот так
  } else if ((500 < boxW) && (boxW < 900)) {
    $(".fotobox").css({ width: "450px", height: "300px" }); // если помельче - то сяк
  } else if (boxW < 500) {
    $(".fotobox").css({ width: "300px", height: "200px" }); // а если еще мельче то эдак
  }
});

var $fotobox = $('.fotobox'), 
    $firstImg = $fotobox.find("img:first"), // узнаем кто первый в очереди
    $lastImg = $fotobox.find("img:last"); // и кто последний - тоже
 
$firstImg.css({'opacity' : '1'}) // первую фотку делаем видимой, остальные нет.
 
$('.rightControl').on('tap click', function(){ // кнопка вправо поехала:
   $fotobox.append($firstImg); // первую фотку вконец списка переместили
   $firstImg = $fotobox.find("img:first"); //запомнили что теперь первой стала вторая
   $lastImg = $fotobox.find("img:last"); // а последней первая
   $firstImg.css({'opacity' : '1'}) // новую первую сделали видимой
});
 
$('.leftControl').on('tap click', function(){ // кнопка влево поехала:
   $fotobox.prepend($lastImg); // крайнюю фотку сделали первой
   $firstImg = $fotobox.find("img:first"); // запомнили кто теперь стал первым 
   $lastImg = $fotobox.find("img:last"); // а кто крайним
   $firstImg.css({'opacity' : '1'})
});