@Norum

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

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

5ff270976b0a4369036280.jpeg
  • Вопрос задан
  • 70 просмотров
Пригласить эксперта
Ответы на вопрос 1
deleo547
@deleo547
Еще один фронтендер
Подписываетесь на ресайз окна браузера и делаете то, что вам нужно.
Как один из вариантов.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Intspirit Краснодар
от 80 000 до 150 000 ₽