Вертикальный рекламный слайдер для DLE: готовый код баннерной карусели в сайдбар

Баннеры в сайдбаре давно приелись посетителям: статичная картинка сверху, ещё одна снизу — кликабельность падает, доход с рекламы вместе с ней. Вертикальный слайдер решает эту проблему: он прокручивает несколько рекламных предложений на одной площади, оживляет страницу и удерживает внимание.

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

Компонент представляет собой вертикальную карусель на чистом 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, если нужно, чтобы кликалась не только картинка.

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