Изображения не отображаются на мобильных устройствах и планшетах, текст и заголовок не обновляются при изменении баннеро ⇐ CSS

[Гость]

Я столкнулся с проблемой на своем веб-сайте: изображения не отображаются на мобильных устройствах и планшетах. Кроме того, когда я переключаюсь между разными баннерами (вкладками), связанный с ними текст и заголовок не обновляются должным образом.

Вот код:

@media screen и (максимальная ширина: 1024 пикселей) { тело { маржа: 0; семейство шрифтов: «Nunito Sans», без засечек; } .slideshow-контейнер { ширина: 100vw; высота: 100вх; положение: относительное; переполнение: скрыто; цвет фона: #000; } .горка { ширина: 100%; высота: 100%; непрозрачность: 0; видимость: скрыта; позиция: абсолютная; верх: 0; слева: 0; переход: непрозрачность 0,5 с, легкость выхода; } .slide.active { непрозрачность: 1; дисплей: встроенный; } .slide изображение { ширина: 100%; высота: 100%; объектное соответствие: обложка; } .градиент наложения { ширина: 100%; высота: 100%; позиция: абсолютная; верх: 0; слева: 0; фон: линейный градиент (вверх, rgba(0, 0, 0, 0,5) 1%, прозрачный 25%); z-индекс: 2; } .tab-banners-horizontal { позиция: абсолютная; внизу: 10 пикселей; осталось: 50%; преобразование: TranslateX (-50%); дисплей: гибкий; оправдание-содержание: пространство вокруг; выровнять-элементы: по центру; z-индекс: 99; } .tab-banners-horizontal .tab-banner { отступ: 10 пикселей 10 пикселей; курсор: указатель; цвет: #A4A4A4; переход: все 0,3 секунды легкости; размер шрифта: 20 пикселей; вес шрифта: 400; } .tab-banners-horizontal .tab-banner.active { белый цвет; } .tab-banner.inactive { цвет: #A4A49B; } /* Стиль для текстовых секций */ .text-раздел { позиция: абсолютная; верх: 50%; осталось: 50%; трансформировать: транслировать(-50%, -50%); цвет: #fff; выравнивание текста: по центру; отступ: 10 пикселей; максимальная ширина: 400 пикселей; z-индекс: 99; } .text-раздел h1 { размер шрифта: 35 пикселей; высота строки: 45 пикселей; семейство шрифтов: 'Nunito Sans'!important; вес шрифта: 400; маржа: 0; белый цвет; } .text-раздел р { размер шрифта: 18 пикселей; высота строки: 26 пикселей; поле: 10 пикселей 0; белый цвет; } .arrow-icon { фоновое изображение: URL(''); размер фона: содержать; фоновый повтор: без повтора; ширина: 60 ​​пикселей; высота: 60 ​​пикселей; курсор: указатель; позиция: абсолютная; внизу: 10 пикселей; осталось: 50%; преобразование: TranslateX (-50%); } .logo { позиция: абсолютная; верх: 10 пикселей; осталось: 50%; преобразование: TranslateX (-50%); z-индекс: 100; } .logo изображение { ширина: 180 пикселей; высота: авто; } } Название для изображения/вкладки Это текст, который можно использовать в вкладке/контейнере.
Сейл Солнечный парус установка document.addEventListener("DOMContentLoaded", function () { const слайды = document.querySelectorAll(".slide"); const баннеры = document.querySelectorAll(".tab-banner"); const imageTitle = document.getElementById("image-title"); const imageText = document.getElementById("image-text"); constarrowIcon = document.getElementById("image-arrow"); константные данные слайда = [ { название: «Парус», текст: "Seilservice являются гордыми представителями OneSails и производят паруса гарантированного качества по всей Норвегии и по всему миру. Предлагая туристические паруса, паруса для лодок, паруса для регаты и сервис, мы гарантируем, что вы всегда будете на одну волну впереди!", связь: "" }, { название: «Солнечный парус», текст: «Мы поставляем как маленькие, так и большие солнечные паруса, а также парусные решения для частного и коммерческого использования. Солнечные паруса представляют собой дальнейшее развитие парусов и используются ежедневно для улучшения эстетики вашей жизни, в то же время обеспечивая хорошее защита от окружающей среды. Свяжитесь с нами сегодня, чтобы найти решение.", связь: "" }, { название: "Риг", текст: «Мы стремимся предоставить вам надежное снаряжение, которое обеспечит вам полный контроль и максимальную производительность на воде. Мы используем только материалы высочайшего качества, а наша продукция рассчитана на длительный срок службы. Наша опытная команда всегда в вашем распоряжении для ремонта и ремонта. техническое обслуживание вашего снаряжения, чтобы вы могли продолжать наслаждаться плаванием, не беспокоясь.", связь: "" } ]; пусть currentSlideIndex = 0; // Сохраняем индекс текущего слайда const imagePreloads = []; for (пусть я = 0; я