Поскольку в дзене есть ограничение на количество картинок в статье Я продолжу тут
Наводим красоту
Решил сделать зону контента с права равной высоте картинки
Сделал так и добавил .slide img, slide-content высота 100%
Результат
Сделал отступ зоне контента от картинки и дал стилей заголовку
Убрал оранжевую рамку получилось так
Гораздо симпатичнее
Ещё одна маленькая проблема
Когда я перенёс слайдер в релизный файл своего сайта, то в итоге текст и кнопка слайда прилипли к его заголовку + текст над всем слайдером стал маленьким.
Проблема была в том, что в основном CSS файле сайта был этот кусок кода
Это глобальный сброс отступов браузера до 0
И когда я перенёс код слайдера он конфликтовал с body
Я о нём забыл, вот что бывает когда пару месяцев не заглядываешь в свой код
Пришлось переделать.
- удалить body
- добавить у текста описания в слайде внешний отступ сверху в 30px
- Увеличить отступ у кнопки Читать дальше с 15 до 30px
И всё заработало как надо
По путано я запихал слайдер в семантический тег <Section> </section>
Потому что так принято это делать. Слайдер это секция 1 у меня. Также покрасил секцию слайдера в цвет серый.
Результат
И вот такой вид получился
Авто прокрутка 2.0
31.10.25
В прошлый раз я говорил что в моём слайдере:
Нет остановки прокрутки при нажатии на кнопки вперёд и назад: Вернее она там есть, но работает она только в мобильном режиме при касаниях можно сделать по круче.
Решил исправить
Создаём переменную
Берём нашу старую локальную функцию
И переделываем её
Снизу пишем функцию стоп и рестарт
Чтобы прокрутка, считала заново после клика на кнопки вперёд назад добавляем вызов функции restartAutoSlide в обработчики кликов по кнопкам.
Тоже самое добавляем в функцию клика на индикатор
Это чтобы прокрутка считалась заново с нуля, после клика мышкой по кружкам
И чтобы всё это дело работало, там где была старая функция прокрутки, я прописал включение при открытии страницы.
Но так при тапах на экранах телефонов прокрутка работать не будет.
Чтобы прокрутка работала и на сенсорных экранах, я заменил строчку clearInterval(autoSlideInterval);
и функцию повторного вызова autoSlideInterval = setInterval
На функции стоп и старт
И всё заработало как нужно
04.11.25
Автоматическую высоту я решил пока выпилить из кода. Потому что изначально раз она работала 1 раз при открытии страницы
Если ты за мной повторяешь удали её тоже.
Улучшение адаптивности слайдера
11.11.2025
Как ты помнишь у меня в коде слайдера был такой набор адаптивных команд
Они базовые и не охватывали все современные типы экранов, пришло время наконец-то это исправить.
Я с толкнулся с двумя вопросами:
- А какие экраны сейчас встречаются, в 2025 году?
- Какие стандартные размеры устройств есть?
Для этого мне пришлось чертить таблицу экранов
В общем телефоны бывают 4х видов
- Компактные: 5,0–6,0 дюймов
- Средние: 6,1–6,3 дюйма
- Выше среднего: 6,4–6,7 дюймов
- Крупные: 6,8–6,95 дюймов
Удаляем старый код адаптивности, и приписываем сначала компудаторы
Тем самым мой слайдер будет нормально выглядеть на таких экранах
- Full HD+
- 2K мониторы
- 4K UHD
- Ультраширокие (UltraWide)
- 5K и 8K мониторы.
Теперь переходим к обычным мониторам Full HD пишем
После этого слайдер увеличится в размерах с такого
на такой
Это нормально так и должно быть
Прописываем планшеты
И телефоны
Тем самым у меня слайдер будет поддерживать Дорогие и обычные мониторы, а так же планшеты с компактными средними смартфонами.
Переходим к смартфонам выше среднего, их очень много это устройства с диагональю экрана от 6,4 дюйма до 6,7 дюйма
Это самые часто встречающиеся смартфоны. Если вычеркнуть разрешения экранов которые я делал на предыдущем шаге, то остаются эти три:
- Realme Note 60 диагональ 6,4 дюйма разрешение 1600×720
- Realme Narzo 50 диагональ 6,6 дюйма разрешение 2412×1080
- Honor 400 Pro диагональ 6,7 дюйма разрешение 2800×1280
Это экраны с высоким разрешением, а значит они будут использовать стили для экрана с 1080 px
И из-за этого вылезло две проблемы:
- Контейнер слайдера не занимает всю ширину (максимум 1300 px);
- шрифты выглядят мешковатыми на 6,7‑дюймовом экране с плотностью пикселей ~450 PPI.
Чтобы это исправить, нужно сделать промежуточный медиа запрос для устройств с шириной 1200–1400 px, чтобы лучше адаптировать шрифты и отступы для крупных смартфонов:
После медиа‑запроса Для экранов шире 1400px (например, 1920×1080, 2400×1080, 2340×1080) я написал этот код
И изменил старый запрос/* Для экранов 1080px–1400px (включая 1440×720) */
на этот, просто изменив диапазон 1400 на max-width: 1199px
Почему это нужно
Изначально был один широкий диапазон:
769 px ≤ ширина ≤ 1400 px
Затем был добавлен промежуточный диапазон:
1200 px ≤ ширина ≤ 1400 px
Если оставить старый диапазон как есть, возникнет конфликт:
экраны 1200–1400 px будут попадать одновременно в два медиа‑запроса:
- исходный (max‑width: 1400px) and (min‑width: 769px)
- новый (min‑width: 1200px) and (max‑width: 1400px)
И они перебивают друг друга
Идём дальше
Переходим к крупным телефонам, Их ещё называют Флагманские смартфоны
1. Samsung Galaxy S23 Ultra диагональ 6,8 дюйма разрешение 1440 × 3088
2. Samsung Galaxy S24 Ultra диагональ 6,8 дюйма разрешение 3120 × 1440
3. Huawei nova Y91 диагональ 6,95 дюйма разрешение 1080 × 2376
В принципе он, итак, нормально адаптируется
Потому что для S23 Ultra и S24 Ultra будет работать @media (min-width: 1401px).
А для Huawei nova Y91 будет работать @media (max-width: 1199px) and (min-width: 769px) Потому что 1080 попадает в диапазон.
Но на смартфонах с высоким соотношением сторон (например, 3088 × 1440) при повороте в портрет может понадобиться дополнительный медиа‑запрос по Высоте (height).
Я его добавил после блока /* Планшеты и узкие десктопы (768px–1079px) */
Пусть будет на всякий случай