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

Question

[id_nomer_odin1]

<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="ihttps://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>

#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;
}

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
}

Comments

[Одиночка Айс]

Таки шо вы хотите, вызывая переменные раньше, чем меняя их?

Answer 1

[Сергей delphinpro]

Используйте интерфейс matchMedia для отслеживания медиазпросов в javascript.

https://developer.mozilla.org/ru/docs/Web/CSS/Medi...

Возвращаемый этим интерфейсом объект MediaQueryList позволяет добавить слушателей, которые будут уведомляться о переключении указанных медиавыражений. В обработчиках событий вы сможете изменять переменные и пересчитывать необходимые вам размеры.