Пауза вне экрана

Модуль visibility автоматически приостанавливает работу autoplay и marquee, когда слайдер скрыт через CSS (display: none, visibility: hidden), и возобновляет их при появлении.

Зачем это нужно?

Когда слайдер скрыт (например, в табе, модальном окне или на мобильных устройствах), autoplay и marquee продолжают работать в фоне, потребляя ресурсы процессора. Модуль visibility решает эту проблему, автоматически приостанавливая их работу.

Базовое использование

Опции

Примеры использования

С Autoplay

Живой пример

Пауза вне экрана

6 слайдов

HTML, CSS и JS в этих вкладках используются в предпросмотре.

Настроить свой →

С Marquee

Живой пример

Marquee с учётом видимости

6 слайдов

HTML, CSS и JS в этих вкладках используются в предпросмотре.

Настроить свой →

Как это работает

Модуль использует два механизма отслеживания:

IntersectionObserver - отслеживает, находится ли слайдер в видимой области viewport
Периодическая проверка CSS - проверяет каждые 500ms свойства display и visibility у слайдера и всех его родителей

Когда слайдер скрывается, модуль:

Приостанавливает autoplay (если pauseAutoplay: true)
Приостанавливает marquee (если pauseMarquee: true)
Эмитит событие sliderHidden

Когда слайдер появляется, модуль:

Возобновляет autoplay (если он был запущен)
Возобновляет marquee (если он был запущен)
Эмитит событие sliderVisible

События

API

Производительность

Модуль использует эффективные механизмы отслеживания:

IntersectionObserver работает асинхронно и не блокирует основной поток
Проверка CSS выполняется только каждые 500ms
При скрытии слайдера autoplay и marquee полностью останавливают свои таймеры/RAF

Это позволяет значительно снизить нагрузку на процессор, особенно когда на странице несколько слайдеров или слайдер находится в скрытом табе.