Что делает этот слайдер

Компонент представляет собой вертикальную карусель на чистом jаvascript и CSS — без jQuery и сторонних библиотек. Основные возможности:

• Автопрокрутка слайдов каждые 5,5 секунды с плавным скроллом (scroll-behavior: smooth и scroll-snap);
• Поддержка тегов баннеров DLE — конструкция, например:

подключает стандартные рекламные места из админпанели;

• Fallback-баннеры: если рекламное место пустое, сработает блок [not-banner_...] и покажется резервный слайд с прямой ссылкой;
• Навигация — кнопки «вверх/вниз» со стрелками и вертикальные индикаторы-точки справа;
• Прокрутка колесом мыши и свайпом на телефонах — трек использует нативный скролл, поэтому управление интуитивно понятно;
• Адаптивность: на экранах до 480 px баннер растягивается на всю ширину и уменьшает высоту с 480 до 380 px;
• Доступность: кнопки помечены aria-label, точки навигации объединены в role="tablist", картинки лениво загружаются через loading="lazy".

Установка в DLE

1. Откройте шаблон сайта (например, templates/Default/) и вставьте весь код в файл sidebar.tpl или в нужное место через тег {include file="banner-slider.tpl"} — так удобнее переиспользовать блок.
2. Если используете рекламные места, создайте их в админпанели: Список рекламных материалов для сайта → добавьте баннеры с именами scoolmaster, sidebar_2 и другими, которые прописаны в тегах [banner_...].
3. Загрузите изображения баннеров в папку шаблона. В примере это файлы black-widow-avengers.jpg, thanos.jpg и другие — размер 320×480 px, формат JPEG или WebP.
4. Замените ссылки https://example.com/promo1 на свои, а также заголовки <h3> и описания под каждым баннером.

Обратите внимание на атрибут rel="noopener nofollow" в ссылках: noopener защищает от уязвимости window.opener, а nofollow корректно расходует вес страницы — стандартная практика для рекламных блоков.

Настройка под себя

Скорость и количество слайдов

Интервал автопрокрутки задаётся константой в скрипте:

const AUTOPLAY_DELAY = 5500; // миллисекунды 

Чтобы добавить новый баннер, скопируйте блок <div class="dvs-slide">...</div> целиком и вставьте после последнего слайда. Скрипт автоматически пересчитает индикаторы — точки создаются динамически из количества слайдов, ничего дописывать не нужно.

Размеры

Высота баннера меняется в CSS:

.dvs-track { height: 480px; /* базовая высота */ } @media (max-width: 480px) { .dvs-track { height: 380px; /* высота на мобильных */ } } 

Максимальная ширина контейнера — max-width: 340px, под стандартный сайдбар. Если шаблон шире, просто увеличьте значение.

Цветовая схема

Тёмная подложка (#12151c) и акцентный синий (#3b82f6) заданы в трёх местах: фон слайдера, цвет заливки кнопок при наведении (hover), активная точка-индикатор (.dvs-dot.is-active). Замените их на цвета своей темы, и слайдер впишется в любой дизайн — от минималистичного до тёмного «кино-стиля», который как раз обыгрывается в демо-баннерах с постерами.

Градиент поверх картинки

Затемнение под текстом задаётся градиентом:

background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.88) 100%); 

Он прозрачен в верхней части и почти чёрный внизу — поэтому заголовок и подпись читаются на любом фоне. Плотность затемнения регулируйте последним значением альфы (0.88).

Как это работает технически

Внутри слайдера нет единого механизма анимации «перетаскивания» — вместо него используется связка CSS scroll-snap-type: y mandatory и JS-метода scrollTo(). Трек — это обычная вертикальная прокручиваемая область, в которой каждый слайд «прилипает» к началу контейнера. Такой подход даёт три преимущества:

1. Нативность. Скролл мышью, тачпадом и пальцем работает «из коробки», с плавной физикой, которую невозможно повторить на transform-анимациях.
2. Надёжность. Даже если jаvascript не загрузился, посетитель всё равно пролистает баннеры обычным скроллом — деградация поведения мягкая.
3. Синхронизация. Обработчик события scroll с дебаунсом в 60 мс сверяет позицию трека с индексом слайда и обновляет активную точку — то есть навигация «догоняет» пользователя, каким бы способом он ни листал.

Автопрокрутка грамотно поставлена на паузу: при наведении курсора (mouseenter) и начале касания (touchstart) таймер останавливается, чтобы баннер не «убегал» из-под взгляда. С уходом курсора цикл возобновляется.

Мелочь, но приятная: если слайд в разметке один, скрипт скрывает кнопки навигации и не запускает лишнюю логику — код можно смело переиспользовать и на страницах с единственным баннером.

Преимущества для трафика и монетизации

• Экономия места. Шесть баннеров занимают площадь одного — критично для сайдбаров, где конкурируют виджеты, меню и блок соцсетей.
• Больше показов каждому объявлению. Слайдер раскручивает всю рекламную ротацию, а не только верхний баннер.
• Визуальный акцент. Анимация смены слайдов цепляет взгляд на первый экран, что повышает CTR по сравнению со статичными блоками.
• SEO-безопасность. Всё содержимое остаётся в HTML: текст оверлеев индексируется, картинки получают alt, а loading="lazy" не тормозит первичный рендер — Core Web Vitals не страдают.

Возможные доработки

Код легко расширяется: можно добавить счётчик «1/6» рядом с точками, подгрузку баннеров через AJAX для реальной ротации или привязку показа слайда к категории новости через теги DLE [aviable] и [category]. Ещё один практичный приём — дублировать ссылку баннера текстом внутри dvs-caption, если нужно, чтобы кликалась не только картинка.

Готовый блок достаточно вставить в шаблон один раз — и вертикальная карусель заработает без сборки, зависимостей и правок движка.

Зачем нужен счётчик в DLE 19

Счётчик решает сразу несколько задач:

• информирует пользователей о времени до завершения работ или старта события;

• снижает число повторных обращений с вопросами «когда заработает?»;

• поддерживает визуальный интерес к странице во время простоя;

• придаёт интерфейсу динамичность и современность.

Что входит в решение

Готовый код включает:

• HTML‑разметку блока счётчика;

• CSS‑стили для оформления и анимации;

• jаvascript‑логику расчёта времени и обновления интерфейса.

• Блок рекламы под таймером отсчета времени;
• Появление уведомления "Работы завершены! Сайт снова доступен!"

Всё работает без внешних библиотек — только чистый код, совместимый с DLE 19.

Шаг 1. HTML‑разметка

Вставьте в нужный шаблон DLE (например, offline.tpl) или замените полностью на следующий код:

<div class="maintenance-countdown"> <div class="countdown-border"></div> <!-- Градиентная рамка --> <div class="countdown-content"> <h3>Технические работы</h3> <p>Сайт вернётся в строй через:</p> <div class="timer"> <div class="time-unit"> <span id="days">00</span> <span class="label">Дней</span> </div> <div class="time-unit"> <span id="hours">00</span> <span class="label">Часов</span> </div> <div class="time-unit"> <span id="minutes">00</span> <span class="label">Минут</span> </div> <div class="time-unit"> <span id="seconds">00</span> <span class="label">Секунд</span> </div> </div> </div> </div> <div class="ad-container"> <script src="//wpwidget.ru/js/wps-widget-entry.min.js" async></script> <div class="wps-widget" data-w="//wpwidget.ru/greetings?orientation=3&pid=5452"></div> </div> 

Шаг 2. CSS‑стили

Добавьте в файл стилей вашего шаблона (style.css):

body { background-color: #0c4951; } .maintenance-countdown { position: relative; width: 100%; max-width: 1000px; margin: 40px auto; overflow: hidden; border-radius: 16px; } /* Градиентная рамка (анимированная) */ .countdown-border { position: absolute; inset: 0; border-radius: 16px; background: conic-gradient( from var(--angle), #ff9800, #e91e63, #9c27b0, #3f51b5, #03a9f4, #00bcd4, #4caf50, #8bc34a ); --angle: 0deg; animation: rotate 8s linear infinite; filter: blur(8px); } @keyframes rotate { to { --angle: 360deg; } } /* Контент внутри (накладывается поверх рамки) */ .countdown-content { position: relative; padding: 30px; background: #086189; /* Тёмный фон для контраста */ border-radius: 14px; color: white; text-align: center; z-index: 1; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .countdown-content h3 { margin: 0 0 10px 0; font-size: 1.8em; color: #fff; } .countdown-content p { margin: 0 0 25px 0; color: #bbb; font-size: 1.1em; } /* Таймер */ .timer { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; } .time-unit { text-align: center; min-width: 70px; } #days, #hours, #minutes, #seconds { font-size: 2.6em; font-weight: bold; color: #ff9800; line-height: 1.2; } .label { display: block; font-size: 0.8em; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 5px; } /* Анимация градиента */ @keyframes gradient-shift { 0% { background-position: 0% 50%; } 100% { background-position: 400% 50%; } } /* Адаптивность */ @media (max-width: 768px) { .maintenance-countdown { margin: 20px auto; max-width: 95%; } .timer { gap: 10px; } #days, #hours, #minutes, #seconds { font-size: 2.2em; } } @media (max-width: 480px) { .countdown-content { padding: 20px; } .time-unit { min-width: auto; margin: 5px 0; } } /* Контейнер для рекламы */ .ad-container { position: relative; width: 100%; max-width: 1000px; margin: 40px auto; overflow: hidden; border-radius: 16px; }

Вставьте перед закрывающим </body> или в отдельный JS‑файл:

<script> document.addEventListener('DOMContentLoaded', function() { // Укажите дату завершения работ (формат: YYYY-MM-DDTHH:MM:SS) const targetDate = new Date('2026-01-02T18:20:00'); // Элементы DOM const daysEl = document.getElementById('days'); const hoursEl = document.getElementById('hours'); const minutesEl = document.getElementById('minutes'); const secondsEl = document.getElementById('seconds'); function updateCountdown() { const now = new Date(); const remainingTime = targetDate - now; // Если время вышло if (remainingTime <= 0) { daysEl.textContent = '00'; hoursEl.textContent = '00'; minutesEl.textContent = '00'; secondsEl.textContent = '00'; document.querySelector('.countdown-content p').textContent = 'Работы завершены! Сайт снова доступен.'; return; } // Расчёт времени const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24)); const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000); // Обновление значений daysEl.textContent = days.toString().padStart(2, '0'); hoursEl.textContent = hours.toString().padStart(2, '0'); minutesEl.textContent = minutes.toString().padStart(2, '0'); secondsEl.textContent = seconds.toString().padStart(2, '0'); } // Запускаем обновление каждую секунду setInterval(updateCountdown, 1000); updateCountdown(); // Инициализация }); </script>

1. Дата окончания
   Измените значение "const targetDate" в JS на нужную дату в формате ГГГГ-ММ-ДДТЧЧ:ММ:СС.

2. Текст сообщений
   Поправьте заголовки и подписи в HTML (<h3> и <p>).

3. Цвета и стили
   В CSS измените:

   • background блока;

   • цвета текста (color);

   • размеры шрифтов (font-size).

4. Анимация градиента
   В @keyframes glow можно:

   • поменять скорость (измените 8s);

   • сменить углы градиента в background.

5. Адаптивность
   В медиа‑запросе @media (max-width: 768px) настройте отступы и размеры для мобильных.

Полезные советы

• Проверяйте время — убедитесь, что часовой пояс сервера и целевой аудитории совпадают.

• Тестируйте на мобильных — откройте страницу на смартфоне, чтобы проверить читаемость.

• Не перегружайте дизайн — счётчик должен быть заметным, но не мешать восприятию информации.

• Добавьте сообщение о завершении — как в примере («Работы завершены!»).

Счётчик легко интегрируется в любой шаблон DLE, не требует внешних зависимостей и адаптируется под экраны разных размеров. Используйте его для информирования о техобслуживании, запусках или акциях — и держите аудиторию в курсе событий!

Можете скачать готовый файл offline.tpl ниже , нажав на кнопку скачать!

Что представляет собой решение HTML гирлянды

Основные элементы декора

Наш новогодний комплект включает два ключевых визуальных компонента:

1. Мерцающая HTML гирлянда — ряд разноцветных огоньков в верхней части экрана, создающих эффект настоящей праздничной иллюминации.

2. Падающий снег — анимированные снежинки разных форм и размеров, плавно спускающиеся по всей площади сайта.

Технические особенности

• Полная совместимость с DLE 19 и другими CMS.

• Отсутствие внешних зависимостей — работает на чистом CSS и jаvascript.

• Адаптивность — корректно отображается на любых устройствах.

• Оптимизированная производительность — не нагружает браузер.

Как это работает: технические детали

Гирлянда с огоньками для сайта

Каждый огонёк — это отдельный HTML‑элемент с уникальными характеристиками:

• 5 цветов (красный, зелёный, синий, жёлтый, фиолетовый);

• индивидуальная анимация мерцания с разной скоростью;

• случайная задержка старта для асинхронного эффекта;

• световые эффекты через box-shadow для объёмности.

Падающие снежинки

Механизм снегопада построен на динамическом создании элементов:

• 7 вариантов символов снежинок (от классических до звёздочек);

• рандомные параметры размера и скорости падения;

• естественная физика движения с горизонтальным смещением;

• автоматическое удаление после завершения анимации.

Преимущества решения

Для владельцев сайта

• Простота внедрения — три блока кода без сложной настройки.

• Гибкая кастомизация — легко изменить цвета, плотность снега, скорость анимации.

• Низкое потребление ресурсов — не влияет на скорость загрузки.

• Не мешает контенту — все элементы имеют pointer-events: none.

Для посетителей

• Атмосферность — создаёт праздничное настроение без навязчивости.

• Плавность анимации — нет рывков и задержек.

• Адаптивность — красиво выглядит на любом экране.

• Ненавязчивость — декор не перекрывает основной контент.

Пошаговая инструкция по установке

1. Добавление HTML‑разметки

Вставьте в шаблон перед </body>:

<div class="holiday-decor"> <div class="garland"></div> <div class="snowfall"></div> </div>

2. Подключение CSS‑стилей

<style> /* Основной контейнер */ .holiday-decor { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; overflow: hidden; } /* Гирлянда (верхняя часть экрана) */ .garland { position: absolute; top: 0; left: 0; width: 100%; height: 40px; } /* Общий стиль огонька */ .light { position: absolute; width: 12px; height: 12px; border-radius: 50%; filter: brightness(1.3); } /* Цвета огоньков */ .light.red { background: #ff3333; } .light.green { background: #33cc33; } .light.blue { background: #3366ff; } .light.yellow { background: #ffff33; } .light.purple { background: #cc33ff; } /* Анимации мерцания (разные для каждого типа) */ @keyframes flicker-red { 0%, 100% { opacity: 0.4; box-shadow: 0 0 8px rgba(255, 51, 51, 0.6); } 25% { opacity: 1; box-shadow: 0 0 12px rgba(255, 51, 51, 0.9); } 50% { opacity: 0.5; } } @keyframes flicker-green { 0%, 100% { opacity: 0.3; box-shadow: 0 0 6px rgba(51, 204, 51, 0.5); } 30% { opacity: 0.9; box-shadow: 0 0 10px rgba(51, 204, 51, 0.8); } 60% { opacity: 0.4; } } @keyframes flicker-blue { 0%, 100% { opacity: 0.5; box-shadow: 0 0 7px rgba(51, 102, 255, 0.6); } 20% { opacity: 0.8; box-shadow: 0 0 11px rgba(51, 102, 255, 0.9); } 40% { opacity: 0.3; } } @keyframes flicker-yellow { 0%, 100% { opacity: 0.2; box-shadow: 0 0 5px rgba(255, 255, 51, 0.4); } 15% { opacity: 0.9; box-shadow: 0 0 9px rgba(255, 255, 51, 0.8); } 45% { opacity: 0.7; } 75% { opacity: 0.5; } } @keyframes flicker-purple { 0%, 100% { opacity: 0.4; box-shadow: 0 0 6px rgba(204, 51, 255, 0.5); } 22% { opacity: 0.8; box-shadow: 0 0 10px rgba(204, 51, 255, 0.8); } 55% { opacity: 0.3; } } /* Применение анимаций к классам */ .light.red { animation: flicker-red 1.8s infinite ease-in-out; } .light.green { animation: flicker-green 2.1s infinite ease-in-out; } .light.blue { animation: flicker-blue 1.9s infinite ease-in-out; } .light.yellow { animation: flicker-yellow 2.3s infinite ease-in-out; } .light.purple { animation: flicker-purple 2s infinite ease-in-out; } /* Контейнер для снежинок */ .snowfall { position: absolute; inset: 0; } /* Снежинка */ .snowflake { position: absolute; color: white; font-family: Arial, sans-serif; font-size: 18px; opacity: 0; text-shadow: 0 0 2px rgba(0, 0, 0, 0.4); animation: fall 12s linear forwards; } /* Анимация падения снежинки */ @keyframes fall { 0% { transform: translateY(-10vh) translateX(0); opacity: 0; } 10% { opacity: 0.7; } 100% { transform: translateY(110vh) translateX(var(--x-offset)); opacity: 0; } } </style>

Добавьте в файл стилей все правила для классов .holiday-decor, .garland, .light и .snowflake.

3. Внедрение jаvascript‑кода

Разместите скрипт перед </body>, убедившись, что:

<script> document.addEventListener('DOMContentLoaded', () => { const garland = document.querySelector('.garland'); const snowfall = document.querySelector('.snowfall'); // Типы огоньков для гирлянды const lightTypes = ['red', 'green', 'blue', 'yellow', 'purple']; // Создаём гирлянду (20 огоньков) for (let i = 0; i < 20; i++) { const light = document.createElement('div'); light.className = `light ${lightTypes[i % lightTypes.length]}`; // Случайная позиция по горизонтали (равномерное распределение) const xPos = (i / 19) * 100; light.style.left = `calc(${xPos}% - 4px)`; // Центрируем (ширина 8px) // Небольшая вертикальная «волна» для естественности light.style.top = `${15 + Math.random() * 10}px`; // Задержка для асинхронного старта анимации light.style.animationDelay = `${Math.random() * 1}s`; garland.appendChild(light); } // Символы снежинок const snowSymbols = ['❄', '❅', '❆', '☆', '★', '*', '.']; // Функция создания снежинки const createSnowflake = () => { const snowflake = document.createElement('div'); snowflake.className = 'snowflake'; // Случайный символ snowflake.textContent = snowSymbols[Math.floor(Math.random() * snowSymbols.length)]; // Параметры const size = Math.random() * 0.8 + 0.6; // 0.6–1.4em const duration = Math.random() * 6 + 9; // 9–15 сек const xOffset = (Math.random() - 0.5) * 120; // Смещение по X // Стили snowflake.style.fontSize = `${size}em`; snowflake.style.left = `${Math.random() * window.innerWidth}px`; snowflake.style.setProperty('--x-offset', `${xOffset}px`); snowflake.style.animationDuration = `${duration}s`; snowfall.appendChild(snowflake); // Удаление после анимации setTimeout(() => snowflake.remove(), (duration + 1) * 1000); }; // Запуск снегопада (каждые 400 мс) setInterval(createSnowflake, 400); // Дополнительно: плавное появление декора document.querySelectorAll('.holiday-decor > *').forEach(el => { el.style.opacity = 0; setTimeout(() => { el.style.transition = 'opacity 1.5s'; el.style.opacity = 1; }, 500); }); }); </script>

• все селекторы соответствуют HTML;

• пути к символам снежинок корректны.

Тонкая настройка под ваш бренд

Изменение цветовой палитры

Замените HEX‑коды в классах .light.red, .light.green и др. на фирменные цвета вашего сайта.

Регулировка плотности декора

• Гирлянда: измените количество итераций в цикле for (по умолчанию 20).

• Снег: отрегулируйте интервал в setInterval() (чем больше значение, тем реже падают снежинки).

Скорость анимации

Поменяйте значения в @keyframes (например, 1.8s на 2.5s) для более медленного/быстрого мерцания.

Рекомендации по использованию

Оптимальные сценарии

• Новогодние акции — подчеркнёт сезонные предложения.

• Праздничные лендинги — создаст нужную атмосферу.

• Корпоративные сайты — добавит человечности в официальный стиль.

Когда лучше отключить

• В рабочих зонах с высокой концентрацией внимания.

• На страницах с тяжёлой графикой (чтобы не перегружать GPU).

• Для пользователей с чувствительностью к мерцанию (предусмотрите переключатель).

Будущие улучшения

Планируемые фичи

• Режим «Эко» — снижение нагрузки на слабых устройствах.

• Настройка через админ‑панель — визуальный редактор декора.

• Сезонные вариации — смена тематики (весенние цветы, осенние листья).

Возможности кастомизации

• Добавление звуковых эффектов.

• Интерактивные элементы (например, «рассыпающиеся» при клике снежинки).

• Интеграция с календарём событий (автоматическое включение/выключение).

Предложенное решение — это баланс эстетики и производительности. Оно:

• мгновенно создаёт праздничное настроение;

• не требует глубоких знаний программирования для внедрения;

• легко адаптируется под любые задачи.

Попробуйте внедрить новогоднюю гирлянду со снежинками — и ваш сайт заиграет новыми красками в преддверии праздников!

С наступающим Новым годом! Пусть ваш онлайн‑проект сияет ярко, как праздничная иллюминация. 🎄