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

Question

Как написать функцию, которая работала бы вот так: при уменьшении ширины экрана слайды постепенно заезжали бы друг под друга и при этом стрелки пролистывания не заезжали на слайды и при при уменьшении ширины экрана до 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 для каждого разрешения экрана муторно, вот я и прошу помочь найти решение путем написания функции.

Код jsfiddle.net/g6qfyd2p/

Сайт http://c96180og.beget.tech/

Answer 1

Сделай через относительные величины. И тогда никаких скриптов не надо)

.carousel-3d-slide.right-1  {
  transform: translateX(14vw) translateZ(-180px) !important; 
}
.carousel-3d-slide.right-2 {
  transform: translateX(28vw) translateZ(-430px) !important; 
}
.carousel-3d-slide.right-3 {
  transform: translateX(44vw) translateZ(-780px) !important;
}
.carousel-3d-slide.left-1 {
  transform: translateX(-14vw) translateZ(-180px) !important;
}
.carousel-3d-slide.left-2 {
   transform: translateX(-28vw) translateZ(-430px) !important; 
}
.carousel-3d-slide.left-3 {
  transform: translateX(-44vw) translateZ(-780px) !important;
}

А при 500 уже через @media меняй, или скриптом. Но там по идее уже другая структура будет. (хотя мб что-то на той-же сообразишь)

БЛОГ НА HUSL

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

Ответы (1 шт):