26.05.2025
Подготовка страницы с нуля
По традиции чтобы не на косячить. Я сделал отдельную папку со слайдером. И базовую структуру Html которая у меня на сайте.
Прописал слова Heder. nav, main, footer между семантическими тегами для наглядности.
Прижал всю эту катавасию куда надо, и дал им такие цвета
Теперь нужно сделать картинки размером 900x400 пикселей закинуть в папку img
Переходим в Html код и пишем каркас слайдера
Заголовок у меня будет с возможностью кастомизации чтобы я мог покрасить каждое слово и фон заголовка.
Для этого Cоздал div с классом slider-title-container и внутри него поместил тег заголовка h2 с названием slider-title
Внутри него ставим тег span с классом <span class="green"> Ссылки</span> так повторяем 4 раза, заменяем имя классов на английские названия цветов затем пишем русские слова которые хотим покрасить.
И получаем в итоге такой кусок кода.
Если запустить, то можно увидеть заголовок.
Переходим в файл CSS, на всякий случай я добавил вот это, для сброса стандартных отступов которые рисует браузер. И задал шрифт для всего документа.
Задал стили фона
text-align: center; - Делает контейнер фона и всё что внутри него, по центру.
Сделал стили тексту заголовка
И в итоге получился такой заголовок
Этот заголовок всегда будет по центру при любом размере браузера
Переходим к слайдеру
Код слайдера
Для слайдера я сделал див для всего слайдера
Внутри него создал ещё один
И внутри сделал ещё один див с названием slide
Внутри дива slide ставим тег <img src=" " alt=" ">
Дальше прописываем в первых кавычках путь до картинки, во вторых кавычках название картинки это для SEO оптимизации.
Что этот путь значит:
img – тег обозначающий картинку
src – атрибут открывающий браузеру путь к картинке
alt — атрибут показывает текст если картинка не загрузилась
loading="lazy" — способ ленивой загрузки.
Под этой картинкой делаем пробел
Там ставим див с классом slide-content
В него запихиваем заголовок описание и кнопку
Для кнопки сделал класс с именем read-more-btn чтобы можно было стилизовать кнопку.
Получилась такая структура первого слайда
Дальше берём этот див slide и копируем столько раз, сколько нужно слайдов в слайдере Для примера я поставлю 3 слайда.
То есть так
Теперь осталось сделать кнопки к слайдеру
Ставим курсор на 63 стр.
И делаем пробел
Прописываем там 2 тега <button></button>
Даём им классы с именем Передняя и задняя кнопка на английском
И ставим им знаки больше меньше с клавы.
Всё. Если сейчас проверить то всё выглядит так.
Осталось сделать стили слайдеру
CSS код
Задал размеры для заднего фона слайдера, покрасил его в оранжевый цвет выровнял слайдер в строчку, и сделал плавную анимацию при смене картинки.
Пока выглядит так
И разместил заголовок описание и кнопку слайдера с права от картинки
Результат такой
Задал размеры картинке слайдера и сделал отступ от заголовка
Вот он
Настроил шрифты у заголовка и текста описания в слайдере.
Результат вот он
Сделал красивую кнопку Читать дальше
Таким Макаром, если на кнопку читать дальше не наводить мышь, кнопка будет чёрная.
А если навести то такого цвета
Сделал стили для кнопки управления будет полу-прозрачный чёрный фон кнопок и белые стрелки Вперёд и назад, а отступы по 10 пикселей.
Вот, Красиво и понятно
Но при мобильном размере экрана не очень смотрится
Нужны медиа - запросы, вот они
Теперь выглядит более менее в мобилке
JS код для движения
Но двигаться он не будет, хоть ты обожмись на эти стрелки, нужно писать код на языке программирования JS скрипт, я его написал.
Поскольку в блокноте Ноты пад ++ будет плохо видно, я покажу его в программе MVSкод вот он:
И после этого всё заработает самое главное положить его в папку js
Индикаторы для слайдера
Изменение в HTML и CSS коде
Но есть проблема, у слайдера сейчас нет индщикации того какой слайд сейчас показывается
Чтобы добавить индикаторы в HTML коде я под тегами кнопок сделал див с классом slider-indicators
Дальше перешёл в CSS и сделал внешний вид индикаторам
Если коротко то:
- Первая кучка команд — Сделал индикаторы снизу под слайдером по центру.
- Вторая кучка — Сделал вид кружков задал ширину высоту цвет неактивных кружков и сделал руку у мышки вместо стрелки.
- Это цвет кружка от слайда который сейчас показывается.
Если это дело сохранить и запустить, кружков мы не увидим.
Это потому что нет самого главного, кода на JS скрипте
JS код индикаторов
Js должен найти найти див с индикаторами пишем: const sliderIndicators = document.querySelector('.slider-indicators');
Затем надо написать две функции:
- Функция для создания индикаторов слайдов.
- Функция для обновления активного индикатора.
Вот показываю на VSCod чтобы коменты лучше было видно
Затем вот этой командой грузим индикаторы при открытии страницы
И обновляем индикаторы этой командой
Результат
После сохранения всего того что сделал, индикаторы можно увидеть.
Поддержка сенсорных экранов телефона
Теперь добавляем тач касания чтобы слайдер мог мотаться на сенсорных экранах телефона пальцем.
Для этого пишем функцию для касания:
Обработчик касания
Забрасываем касания до нуля.
Всё
Проверка тач-касаний
Теперь нужно проверить реагирует ли слайдер на пальцы для этого надо положить всю папку May slayder в телефон и открыть файл index со слайдером в телефоне.
Но если его просто перейти по путю где лежит файл index, и открыть как есть, то будет такое.
Это потому что твой мобильный браузер, не может получить доступ ко всем файлам твоего сайта. И получает его только к HTML каркасу страницы сайта которую ты на молевал.
Мобильные браузеры не могут работать на прямую с локальными сайтами, в отличии от компутерных браузеров.
Нужно чтобы мобильный браузер мог грузить CSS файл стилей сайта.
То есть речь сейчас идёт об этом:
Нужно запускать локальный сервер на телефоне тогда всё заработает Для этого можно использовать приложение simple HTTP server (Оно бесплатное).
Я его запустил
Проблема в том, что эта падла картинки слайдера не сразу грузит, но это хрен с ним, главное свайпы пальцем работают и стрелки правильно реагируют.
Проблема о которой я говорил в прошлой статье
Выявилась проблема с футером и майном в горизонтальном положении
Помнишь я писал в прошлый раз:
Я ошибся в CSS стилях
Для main я задал фиксированную высоту (height: 50px;). Фиксированная высота не позволяет main автоматически растягиваться в зависимости от количества контента внутри него. Так не надо было делать.
Эту проблему можно исправить:
Можно сделать по старинке, как мы деды делали. И потом добавить в main свойство background-color: white; чтобы цвет секции менять как хочешь.
Либо сделать по современному: Стильно модно молодёжно:
Я оставлю так потому что деду надо расти дальше. Главное удали в блоке Main строчку (height: 50px;)
И при проверке на локальном сервере в телефоне теперь выглядит как надо.
И картинки он ещё прогрузил.
Но он на самом деле прогрузил их из памяти телефона в галереи посмотри.
Поддержка автоматической высоты
Что это такое:
Если высота слайдов сильно отличается, может потребоваться динамически подстраивать высоту контейнера слайдера под высоту текущего слайда, чтобы избежать пустых областей.
Что мне пришлось для этого сделать, создать переменную:
let autoSlideInterval; // Объявляем переменную для интервала автоматической прокрутки это для хранения времени.
написать эту функцию. Над показом слайда
И вызывать её каждый раз при показе нового слайда. Для этого я добавил эту строчку в функцию показа слайдов.
А также подправить автоматическую прокрутку, сделать let. Хотя к автоматической высоте он не относится но я сделал.
И вызвать функцию setSliderHeight(); при загрузке страницы
Почему пришлось сделать let
Для учителей блин
В этом первом коде, который я в первый раз показывал. Он меня ещё со времён шараги в тетрадке остался, ему хрен знает сколько лет. Я его просто переписал с тетрадки как есть. (Поменял только имена классов в скобках под структуру своего сайта) и всё.
В нём небыло функции setSliderHeight(); и она не вызывалась при показе слайда и загрузке всей главной страницы сайта, а автоматическая прокрутка была такой: это её простой вариант (строка 40).
+ в коде нет функций косания, и запуска прокрутки снова, она работает только на мышь в компудаторе.
Таким макаром. Автоматическая прокрутка работает постоянно при загрузке страницы и прокрутку нельзя остановить пальцем на телефоне, и сколько бы ты не нажимал на стрелки пальцем слайдер будет менять слайды каждые 5 сек и всё.
Потому что он не мобильный а компудаторный слайдер.
Тогда когда я учился, о адаптации сайта под телефоны не задумывались, сайты были в основном для компудатора, а телефон был кнопочным и интернет под него дорогим.
Во втором скрипте я добавил Тач касания пальцем
Добавил остановку и возобновления
А про let забыл
Вот это
Имеет отношение к этому, я тут стрелками отметил:
К тыкам пальцем на мобилках в общем
Вот это
значит что Интервал (время 5 сек) сохраняется в переменной autoSlideInterval. Это дает возможность:
- Остановить автоматическую прокрутку, вызвав очистку автоматического интервала слайдера - clearInterval(autoSlideInterval).
- Запустить прокрутку заново, вызвав autoSlideInterval = setInterval(...) снова. В общем по человечески: Слайдер запомнил касания пальцем по нему и где его остановили, и с того же места продолжил листать слайды автоматически каждые 5 сек.
Надеюсь понятно объяснил
В общем бог дзена тоже косячит
Я ни кого не учу, я рассказываю через что мне пришлось пройти и что сделать, это мой личный опыт. Как я с этим мудохался.
Не стоит повторять за мной я могу ошибаться.
Обработка ошибок слайдером
Тут нужно прикинуть возможные сиситуэйшин, что будет если DOM-элементы не найдутся или возникнут другие ошибки во время выполнения.
А именно
- Проверить наличие всех элементов слайдера перед их использованием.
- Использовать try...catch для перехвата неожиданных ошибок.
- Выводить сообщения об ошибках в консоль браузера или отображать их пользователю (то есть тебе.)
Для этого мне пришлось создать новый отдельный файл скрипта
И закинуть всё что я намалевал внутрь блока try, а между перечислением переменных и функцией установки высоты сделать if со скобками и перечислением всех частей слайдера.
И да, их можно и в столбик перечислять
но в строчку мне удобнее.
И каждую функцию запихать в блок try
сделать комменты чё куда внизу
И всё. обработка ошибок она в основном для разработчика сайта, для пользователя она не видна.
Этот слайдер можно использовать, он более менее предназначен для мобильных устройств.
Но учти: Если ты за мной собрался повторять, (чего я не советую делать?)
У этого слайдера нет:
- Предотвращение двойного переключения слайдов.
- Нет остановки прокрутки при нажатии на кнопки вперёд и назад: Вернее она там есть, но работает она только в мобильном режиме при касаниях можно сделать по круче.
Если я буду улучшать код слайдера я тут напишу. Там дальше улучшения связаны только с JS скриптом слайдера и всё.
Я закалибался его делать. Я его делаю с 26.05 2025 с конца весны!
А закончил 3-го числа Летом.
И всё в ручную на блокноте Ноты-пад без бутстрапа
И ты не представляешь на сколько я закалибался.
Это хорошо ещё старые тетради с конспектами не выкинул. А то ещё дольше было бы.
Проблемы при переносе
04.06.2025
Я подумал: Пора переносить этот слайдер в религиозный файл сайта Ага счас((!!
При переносе вылезло две проблемы:
1. Размер слайдера маленький
2. В мобильном окне такое
Это называется часть контента слайдера скрывается при мобильном разрешении экрана. но он есть.
Проблема в функции setSliderHeight(), которая жёстко устанавливает высоту контейнера слайдера, равной высоте текущего слайда. На мобильных устройствах, из-за адаптивных стилей, контент слайда может занимать больше места по высоте, чем предполагалось, и часть контента оказывается скрытой.
Чтобы исправить проблему номер 2, я удалил фиксированную высоту height 400px; установил минимальную высоту добавив эту строчку в стилях .slider
В JS по менял с этого
На минимальную высоту
В этом случае, функция setSliderHeight() устанавливает минимальную высоту (minHeight) вместо фиксированной высоты (height).
Через min-height слайдер всегда будет минимум 200px в высоту, но будет расширяться, если контент слайда этого требует.
И исправилось
05.06.2025 Вот же падла!!!(((
Как только я исправил скрытие части контента слайдера при мобильном экране, появилась проблема с функцией установки высоты контейнера под текущий слайд.
Из за неё менялся размер контейнера Slide по высоте и задний оранжевый фон слайдера расширялся в высоту при выходе из мобильного экрана.
Оказалась в этом виновата функция setSliderHeight() она вызывалась слишком часто мне пришлось её закомментировать
По сути удалить вызов
каждый раз при показе нового слайда вызывалась эта функция и общипывалась. Зачем перемалывание ресурсов браузера в холостую
Теперь она вызывается один раз при загрузке главной страницы сайта
Оказалась причина в том что каждые 5 секунд работают две функции одновременно:
- Функция установки высоты контейнера под текущий слайд.
- Функция показа слайда
И при выходе из мобильного режима, между этими функциями происходит ругань. Это называется проблема рендеринга,
Чтобы они не ругались друг с другом, нужно сделать чтобы с начала работала установка высоты под слайд а потом функция показа слайда,
Сначала он должен посчитать высоту, потом листать слайды. И посчитать высоту слайда до того как его поменяет
Для этого удаляем нахрен эту строку
Я же говорю, Я косячу
Я увеличил размер слайдера
Теперь нормально выглядит, слайдер в виде кнопочного телефона получился
Это ещё не всё.
Продолжение тут: https://dzen.ru/a/aPokjVpLPXEE1Avn