Как написать функцию, которая будет уменьшать translateX объекта при уменьшении экрана?

Question

[Norum]

Как написать функцию, которая работала бы вот так: при уменьшении ширины экрана слайды постепенно заезжали бы друг под друга и при этом стрелки пролистывания не заезжали на слайды и при при уменьшении ширины экрана до 400-500 пикселей отображался только один слайд со стрелками. Сами слайды я расположил вот таким образом и сделал это через плагин vue 3d carousel

.carousel-3d-slide.right-1  {
  transform: translateX(270px) translateZ(-180px) !important; 
}
.carousel-3d-slide.right-2 {
  transform: translateX(540px) translateZ(-430px) !important; 
}
.carousel-3d-slide.right-3 {
  transform: translateX(840px) translateZ(-780px) !important;
}
.carousel-3d-slide.left-1 {
  transform: translateX(-270px) translateZ(-180px) !important;
}
.carousel-3d-slide.left-2 {
   transform: translateX(-540px) translateZ(-430px) !important; 
}
.carousel-3d-slide.left-3 {
  transform: translateX(-840px) translateZ(-780px) !important;
}

Но писать translateX для каждого разрешения экрана муторно, вот я и прошу помочь найти решение путем написания функции.

Код https://jsfiddle.net/g6qfyd2p/
Сайт c96180og.beget.tech

Comments

[Вадим]

При загрузке документа проверяете ширину окна и проставляете соответствующее значение. В чём проблема?
Так же можно подписаться на ресайз окна браузера и делать то же самое.

[Norum]

Вадим, так а как это правильно прописать? Я с jquery пока не особо дружу

[Вадим]

Norum, загуглить то что я выше написал