Постраничный слайдер

Мой очень лёгкий постраничный слайдер для скролла сайта отдельными визуальными блоками размером с экран.

В каждую страницу-слайд можно вставлять любой контент — лишь бы влезло.

Скроллить слайды можно колёсиком мыши, тачем на тачскринах и некоторыми клавишами клавиатуры.

Листайте дальше описание.

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

Для использования необходимо поставить на страницу разметку: Каждый блок - это одна страница-слайд.

Далее нужно наполнить все fullSizeBlock-блоки вашим контентом. А JS-скрипт всё сделает сам!

Т.к. весь код в IIFE, то конфликта имён переменных не будет.

Использование мыши

Одно движение колёсика мыши листает слайд экрана целиком вверх или вниз.

Использование центральной кнопки не отключено - страницу можно перемотать частично.

После такой неполной перемотки автоматически высчитывается "активный" слайд в боковом блоке и подсвечивается нужный пункт.

Использование на смартфоне

Скрипт поддерживает свайпы вверх и вниз.

Разные мобильные браузеры по-разному обрабатывают скролл страниц тач-движением. Поэтому браузерный скролл во время тач-движения полностью отключён и имитируется.

Использование клавиатуры

Клавиши Page Down и Page Up листают по одному слайду.

Остальные клавиши - Home, End, стрелки и пробел оставлены "как есть", чтобы пользователь всё-таки мог сделать неполную перемотку.

Добавление подписей в боковые ссылки

Если требуется добавить текст внутрь боковых ссылок или всплывающие подсказки, то нужно поработать с функцией fillSideLinks(), которая как раз создаёт эти ссылки.

Например, можно каждому блоку с классом fullSizeBlock добавить data-атрибут, а потом из него брать значение для текста подсказки.

Не забывайте про разные размеры экранов

Всегда нужно помнить, что на смартфонах меньше места на экране.

Чтобы избежать проблем, можно, например, использовать относительные единицы измерения вроде процентов или em. Либо использовать размеры относительно viewport (vh и vw).