#javascript #html #css #responsiveness
#javascript #HTML #css #отзывчивость
Вопрос:
Когда я изменяю ширину окна браузера, я хочу, чтобы он также обновлял JavaScript. Это потому, что я создал карусель-слайдер, где JavaScript вычисляет, сколько преобразований должно произойти для каждого скользящего изображения. Когда я перезагружаю страницу, преобразование выполняется правильно при прохождении через изображения (нажатием кнопки). Но как только я изменяю ширину окна браузера, JavaScript, похоже, не обновляется до новой информации и, в свою очередь, выполняет неправильное преобразование (предыдущая ширина карусели-слайдера, перед изменением ширины). Это можно исправить, полностью загрузив страницу, но это прерывает поток. Я бы хотел, чтобы мой карусельный слайдер был отзывчивым и корректно работал в режиме реального времени при изменении ширины окна.
Комментарии:
1. developer.mozilla.org/en-US/docs/Web/API/Window/resize_event
2. Используйте событие resize для пересчета ваших размеров, как указывает Марти. Вы не можете запускать события из изменений в CSS, хотя изменение окна браузера является событием агента пользователя.
3. Вместо того, чтобы вычислять ширину элемента вручную, попробуйте использовать относительную единицу измерения. Например,
transform: translateX(-100%)для дочерних элементов в карусели.4. Один вопрос, который вы должны задать себе, заключается в том, как часто люди активно изменяют размер своих браузеров и имеет ли смысл быть настолько отзывчивым. Многие сайты разрабатываются для определенного набора предопределенных размеров экрана (например, большой, средний, маленький) и используют медиа-запросы для задания конкретных преобразований для этих размеров.
5. Спасибо всем за отличный совет, теперь он работает! Я использую событие «изменить размер», а также обновил код для использования
transform: translateX(-100%). Я также начал внедрять определенные преобразования для разных размеров носителей. Большое вам всем спасибо!