================================================================================ УНИВЕРСАЛЬНЫЙ СЛАЙДЕР - ИНСТРУКЦИЯ ПО УСТАНОВКЕ И НАСТРОЙКЕ ================================================================================ СОДЕРЖАНИЕ: 1. Описание 2. Блоки кода (HTML / CSS / JavaScript) - ГДЕ И КУДА ВСТАВЛЯТЬ 3. Настройка (CSS переменные) 4. Настройка (JavaScript конфигурация) 5. Полный код HTML файла (для справки) 6. Примеры использования ================================================================================ 1. ОПИСАНИЕ ================================================================================ Универсальный слайдер - это полнофункциональный слайдер изображений с текстом, который включает: - Автоматическую прокрутку - Ручную навигацию (стрелки и точки) - Клавиатурную навигацию (стрелки влево/вправо) - Адаптивный дизайн - Настраиваемые цвета, размеры и анимации - Поддержку градиентов и изображений в качестве фона Все стили (CSS) и скрипты (JavaScript) включены в один HTML файл. Никаких внешних зависимостей не требуется. ================================================================================ 2. БЛОКИ КОДА - ГДЕ И КУДА ВСТАВЛЯТЬ ================================================================================ СТРУКТУРА СТРАНИЦЫ СЛАЙДЕРОМ: Ваша страница
──────────────────────────────────────────────────────────────────────── БЛОК 1: CSS СТИЛИ (вставить в внутри тега
================================================================================ 6. ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ ================================================================================ ПРИМЕР 1: Изменение цветовой схемы на синюю В блоке :root измените: --button-bg: #3498db; --button-hover: #2980b9; --dots-active: #3498db; ПРИМЕР 2: Добавление изображений из локальной папки Измените background в массиве slides: background: 'url(images/my-image.jpg) center/cover' ПРИМЕР 3: Отключение автопрокрутки В SLIDER_CONFIG установите: autoPlay: 0 ПРИМЕР 4: Быстрая прокрутка (2 секунды) В SLIDER_CONFIG установите: autoPlay: 2000 ПРИМЕР 5: Центрирование контента В SLIDER_CONFIG установите: centerContent: true ПРИМЕР 6: Добавление нового слайда В массив slides добавьте объект: { title: 'Новый заголовок', text: 'Новый текст описания', buttonText: 'Кнопка', buttonLink: 'https://example.com', background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', overlay: 'rgba(0, 0, 0, 0.4)' } ПРИМЕР 7: Программное управление слайдером После загрузки страницы доступен объект window.slider: - window.slider.nextSlide() - следующий слайд - window.slider.prevSlide() - предыдущий слайд - window.slider.goToSlide(2) - перейти на слайд номер 2 (начиная с 0) - window.slider.pauseAutoPlay() - приостановить автопрокрутку - window.slider.startAutoPlay() - возобновить автопрокрутку ================================================================================ ТЕХНИЧЕСКАЯ ПОДДЕРЖКА ================================================================================ Слайдер полностью автономен и не требует: - jQuery или других библиотек - Внешних CSS файлов - Внешних JavaScript файлов - Интернет-соединения (кроме случаев использования изображений из интернета) Совместимость: - Все современные браузеры (Chrome, Firefox, Safari, Edge) - Мобильные браузеры (iOS Safari, Chrome Mobile) - Планшеты Если возникли проблемы: 1. Убедитесь, что JavaScript включен в браузере 2. Проверьте консоль браузера (F12) на наличие ошибок 3. Убедитесь, что ID контейнера 'slider' уникален на странице ================================================================================ КОНЕЦ ДОКУМЕНТА ================================================================================