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

Question

[lagudal]

Ситуация следующая - имеется кастомный слайдер, слайды - изображение + текст. В десктопной версии картинка слева - текст справа, в мобильной - текст под картинкой.
Стрелки вперед-назад позиционируются посредине картинки. Для десктопа проблем нет, чисто css. Для мобильной - задумка простая: вычисляю высоту картинки и подставляю половину высоты как топ позицию для стрелок.
Все работает, но есть одна маленькая проблема.
Взяв для рассчета высоты первую картинку из массива, я поставляю вычисленное значение еще и при ресайзе (например, юзер перевернул смартфон) . Но если перед ресайзом перейти ко второму (третьему и т.д.) слайду, то при ресайзе моя топ-позиция принимает значение равное 0px , т.к. первая картинка уже скрыта, и ее высота вычисляется как 0.
Т.е. мне надо брать постоянно актуальную картинку, и динамически после клика по стрелкам менять мою переменную?
Или есть какое более простое решение, которое я не вижу?
Ниже данный слайдер, код о котором речь в последней секции ( Vertical alignment next and prev arrows in mobile view )

Comments

[Вадим]

То есть Вы хотите чтобы стрелочки в мобилке были всегда по середине картинки, а картинки могут быть разного размера? Так себе идея.
Получается что интерактивная зона будет в разных местах - сомнительный пользовательский опыт.
У этого есть 3 популярных решения:
1) Стрелочки вообще убирают на мобильных и оставляют возможность листания свайпом + автопереключение по таймеру (которое отключается если палец прижат к экрану)
2) Стрелочки выносятся отдельно над\под слайдером и всегда находятся в одном месте
3) Фиксированный бокс под картинки, потому что когда всё вверх вниз дёргается это тоже не прикольно, особенно на мобильных. Ну и, соответственно, не нужно ничего высчитывать. css only top 50%

[lagudal]

Картинки будут одного размера, под ресайзом я имею в виду ресайз окна - как я уже сказал, например, если пользователь перевернет девайс с portrait на landscape view.
К сожалению, это утвержденный макет, дизайнер так нарисовал )

[Ankhena]

lagudal, если картинки одного размера и их пропорции известны, то вообще не понятно, зачем вам js для вычисления позиции стрелок.

[lagudal]

Ankhena,
да, точно, только что тоже подумал - у меня размеры пропорционально 600х410px.
Т.е. половина высоты к ширине - 0.341 примерно. Таким образом топ для моб будет равен 34vw - правда, чтобы четко посредине было надо небольшую корректировку на блок самих стрелок сделать.
У меня сейчас ну чтобы прям тютелька в тютельку получилось calc(34vw - 16px) - стрелки находятся точно на уровне текста.

[RAX7]

.slider-prev {
  top: 0 !important;
  margin-top: calc((68.33% - 64px) / 2) !important; /* 100 / (width / height) -> 100 / (600 / 410) == 68.33% */
}

JS ненужон! !important добавлен только, чтобы перебить ужасно длиннющие селекторы.

[Вадим]

lagudal, Утверждённый Вами? Хотя бы совместно с Вами? Если нет, то значит не утверждённый. Дизайнер может нарисовать какую угодно дичь. Не значит что это истина в последней и единственной инстанции на которую стоит опираться. Один из определяющих критериев грамотного разработчика интерфейсов - выдавать взвешенные решения как для кода, так и для конечного пользователя и обоснованно доносить это заказчику.

[Ankhena]

lagudal,

чтобы четко посредине было надо небольшую корректировку на блок самих стрелок сделать.

угу...
обычно эта небольшая корректировка выглядит так:
transform: transtateY(-50%)

[historydev]

lagudal, утверждённый макет не гарантирует идеальные решения, поговорите на этот счёт с человеком который поставил задачу, вам дадут решение, обсудите.