Jump to content

как сделать адаптивный навигатор для слайдера под фотоальбом


Recommended Posts

Так выглядит слайдер на ПК. Тут всё ок.2021-06-04_12-44-13.png

А вот так всё плохо на телефоне, планшетах или на ПК с низким разрешением.

2021-06-04_12-45-05.png

Стрелки перелистывания фотографии немного выходят. Фотоальбом весь автоматом масштабируется благодаря: "width: 98%; max-width: 700px;", кроме стрелок. Стрелки почему то не хотят, по этому я сделал им ограничитель "max-height: 78%". Подскажите как пофиксить этот нюанс. Простите, если не корректно объяснил, я тот ещё Сусанин.

 

Link to post
Share on other sites

Здравствуйте.

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

Вам бы выложить пример в песочницу, так гадать сложно.

Link to post
Share on other sites
55 минут назад, klierik сказал:

Здравствуйте.

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

Вам бы выложить пример в песочницу, так гадать сложно.

не смог загрузить пример в песочницу из за фотографий, могу лишь так архивом(. Да вы правы, масштабируемый.

albom.rar

Link to post
Share on other sites

.rar, в отличии от .zip, не является универсальным кросс-системным архиватором. Он набрал популярность лишь под в конце 90х Windows. Попробуйте перебрать в zip

Link to post
Share on other sites
12 часов назад, klierik сказал:

.rar, в отличии от .zip, не является универсальным кросс-системным архиватором. Он набрал популярность лишь под в конце 90х Windows. Попробуйте перебрать в zip

albom.zipвоть

Link to post
Share on other sites

В данной работе высота кнопок — фиксированная.

Как вариант отделить контейнерами основное изображение, верхнюю и нижнюю часть. Тогда будет проще реализовать задачу

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy