Как поменять переменную js в зависимости от размера экрана? Чтобы слайдер был адаптирован

var count_elements = 3,
  current_element = 0,
  width = 225,
  height = 119,
  duration = 500;
var screen = $('#items');
screen.width(width * count_elements);

let img = document.querySelectorAll('#items img');
img.forEach(el => {
  el.style.width = width + 'px';
});

function move_screen(x) {
  current_element = (current_element + x) % count_elements;
  if (current_element < 0) {
    current_element += count_elements;
  }
  //console.log(current_element);
  screen.animate({
    marginLeft: -width * current_element
  }, duration);
}
$("#prev").click(function() {
  move_screen(-1);
})
$("#next").click(function() {
  move_screen(1);
})


var widthscreen = window.innerWidth //получаем размер экрана

if (widthscreen <= '425') {
  width = 225
  height = 119
}

if (widthscreen >= '1200') {
  width = 375
  height = 211
}

#slider {
  position: relative;
  width: 225px;
  height: 119px;
  margin-bottom: 10px;
  border-radius: 23px;
  overflow: hidden;
}

#items {
  float: left;
  height: 200px;
  font-size: 0;
}

#items img {
  vertical-align: top;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider">
  <div id="items">
    <img src="https://static.tildacdn.com/tild6538-3739-4730-a437-373362623664/_viber_2022-06-25_03.jpg" />
    <img src="https://static.tildacdn.com/tild6535-6530-4734-a631-646334663832/noroot.png" />
    <img src="https://static.tildacdn.com/tild3835-6530-4266-b235-373731633962/noroot.png" />
    <img src="https://static.tildacdn.com/tild6165-3461-4165-b237-636333316538/_viber_2022-06-25_03.jpg" />
  </div>
</div>

<button id="next">Next</button>
<button id="prev">Prev</button>