Адаптивная галерея изображений для сайта на JavaScript.

1. Вступление.
2. HTML-вёрстка.
3. Таблица стилей.
4. Инициализация галереи.
5. Формирование навигации.
6. Регистрация обработчиков событий.
7. Прокрутка галереи.
8. Управление прокруткой галереи.
9. Адаптация галереи к изменению разрешения.
10. Инициализация галереи при изменении разрешения экрана.

Вступление.

Галерея изображений становится неотъемлемой частью любого сайта и, тем более, продающего лендинга. В этой статье я расскажу вам, как создать адаптивную галерею начиная с HTML-вёрстки и заканчивая JavaScript, подключить к ней анимационные эффекты и различные способы управления прокруткой, в том числе с использованием swipe.

Для начала составим техническое задание на создание адаптивной галереи изображений:

1. Галерея должна быть адаптивной и должна корректно работать на любом устройстве с разрешением от 320px и выше.
2. Для управления галерей изображений используем максимально возможные варианты:
   — кнопками навигации «prev» и «next»;
   — пагинация;
   — клавишами клавиатуры со стрелочками «вправо» и «влево»;
   — вращением колёсика мыши;
   — перетаскивание с помощью курсора мыши;
   — на мобильных устройствах пролистывание пальцем (swipe);
   — автоматическое прокручивание галереи.
3. Перечисленные способы навигации можно комбинировать, подключать или отключать при необходимости.
4. Переход к следующему изображению при перетаскивании осуществиться, если изображение было перемещено на расстояние не менее 50% от его ширины. В противном случае, слайдер плавно вернётся к текущему изображению.
5. К галерее изображений возможно подключение модуля анимации для создания анимационных эффектов при смене изображения.

HTML-вёрстка адаптивной галереи изображений.

Сначала я вам представлю HTML-вёрстку галереи изображений, а потом её прокомментирую.

Рассмотрим подробнее назначение контейнеров и блоков из которых состоит галерея:

div.gallery

Родительский контейнер галереи. В атрибуте data-setting содержит имя объекта с настройками галереи.

div.slider

Определяет размер видимой части нашей адаптивной галереи. Количество одновременно показываемых изображений в данном контейнере определяется в настойках.

div.stage

В этом контейнере размещены все элементы галереи изображений. Изменяя его позиционирование относительно родительского элемента, мы получим прокрутку галереи.

div.control

Содержит управление пошаговой и постраничной навигации.

div.nav-ctrl

Элементы управления, расположенные в контейнере, отвечают за прокручивание галереи на один шаг (одно изображение). Можно из этих элементов убрать текст, разместить их справа и слева от галереи и отобразить в них стрелочки «вправо» и «влево», используя фоновые изображения. Никакое изменение вёрстки при этом не требуется, достаточно внести изменения в таблицу стилей.

div.dots-ctrl

Немаркированный список, в котором располагаются элементы постраничной навигации. Они генерируются скриптом в зависимости от настроек галереи изображений.

В вёрстке допущены пару упрощений, которые не влияют на работоспособность галереи, но подробно останавливаться на них в рамках данной статьи нет смысла — это отдельная тема.

1. При клике на изображение не будет открываться его полноразмерный вариант.
2. В HTML-вёрстке сразу присутствует код элементов как пошаговой, так и постраничной навигации. Достаточно было бы вставить в вёрстку только их родительский элемент — <div class="control">, а саму навигацию создавать «на лету» с помощью JavaScript, в зависимости от настроек галереи изображений.

Таблица стилей для адаптивной галереи изображений.

Представлены только стили, относящиеся непосредственно к самой галерее.

Инициализация адаптивной галереи изображений.

Первое, что мы сделаем, это создадим анонимную самозапускающуюся функцию, внутри которой и будет расположен наш код.
Нужно взять за правило ограничивать область видимости скрипта, чтобы исключить конфликты с другими JS-скриптами подключенными к странице.

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

Создание экземпляров адаптивной галереи изображений.

В-первую очередь, создадим коллекцию галерей, которые расположены на странице. Далее, с помощью метода for...of переберём полученную коллекцию, при этом мы выполним следующие действия:
— определим вариант настроект для данной галереи;
— создадим экземпляр текущей галереи, используя конструктор класса Gallery.

Весь дальнейший JS-код мы будем писать внутри конструкции class Gallery { ... }.

Прежде всего рассмотрим конструктор класса Gallery. Конструктор инициализирует ряд объектов и переменных, содержащих информацию об экземпляре галереи. В качестве аргумента конструктор принимает объект адаптивной галереи, экземпляр которого создаётся в данный момент, а также объект с индивидуальными настройками галереи.

Статичные свойства и методы адаптивной галереи изображений.

Кроме объектов и переменных, инициализированных в конструкторе, класс Gallery содержит ряд статических свойств, констант и методов.
К статичным свойствам относится объект defaults с настройками по-умолчанию. Константы содержат код клавиш «стрелочка влево» и «стрелочка вправо».
Статические методы относятся к самому классу, а не его экземплярам и объектам. Мы будем использовать два статических метода:

extend()

объединяет и перезаписывает значения двух объектов и выдаёт общий результат

xpos()

возвращает координату Х текущего положения курсора или пальца

Запуск инициализации адаптивной галереи изображений.

Инициализация галереи начинается вызовом функции init из конструктора класса Gallery. В свою очередь, она вызывает ряд функций, которые:

1. Объединяют дефолтные настройки адаптивной галереи изображений defaults с пользовательскими настройками setup, полученными в качестве второго аргумента. Результат помещается в объект options — это основной объект, с которым будет работать JS-скрипт галереи.
2. Рассчитывают и формируют каркас галереи с учётом данных записанных в объект настроек options.
3. Получают координату X каждого элемента галереи и помещает её в массив.
4. Формируют навигацию по галерее.
5. Устанавливают обработчики событий.

Код функции init и комментарии к нему:

Рассмотрим каждую функцию, вызываемую из функции init подробнее.

Объединяем дефолтные и пользовательские настройки адаптивной галереи изображений.

Статическая Функция extend заменяет значения свойств объекта defaults на значения свойств объекта setup, в котором находятся пользовательские настройки. Полученный результат записывается в объект options, принадлежащий текущему экземпляру галереи. Если бы на странице было несколько галерей, то каждому экземпляру галереи соответствовал свой объект options, содержащий индивидуальные настройки данной галереи.
JS-код функции был представлен ранее.

Формируем каркас адаптивной галереи изображений.

Теперь, с учётом полученных настроек, прописанных в объекте options, и текущей ширины страницы, необходимо сформировать каркас галереи, вычислив размер окна слайдера и размеры элементов галереи.

Всеми вычислениями занимается функция setSizeCarousel. Алгоритм работы функции:

• 1

  Получает ширину контейнера с классом slider. Этот контейнер является вьюпортом галереи — именно в нём происходит перемещение его элементов. Так как галерея должна быть адаптивной, то ширина данного контейнера зависит от размеров окна браузера.

  JavaScript

  this.widthSlider = this.slider.offsetWidth;

  1 2 3

  this.widthSlider = this.slider.offsetWidth;

• 2

  Вычисляется максимальный индекс, который может быть у текущего элемента, чтобы на последней странице галереи при использовании пагинатора наблюдалось кол-во элементов равное visibleItems.

  JavaScript

  this.max = this.count - this.options.visibleItems;

  1 2 3

  this.max = this.count - this.options.visibleItems;

  Давайте внимательно посмотрим на рисунок.

  

  На рисунке показаны две галереи прокрученные до конца. Для верхней галереи свойство max не применялось, индекс последнего элемента равен 11 (отсчёт индекса начинается с 0), а последним элементом, до которого возможна прокрутка, является «Element 12».
  В нижней галерее использован максимальный индекс (this.max = 12 - 3), поэтому слайдер прокрутился только до «Element 10». В результате, всё окно слайдера заполнено изображениями, и в таком варианте галерея выглядит красивее.

• 3

  Вычисляет ширину элемента слайдера. Элемент слайдера — это контейнер <DIV> внутри которого находится изображение. Ширина элемента зависит от количества одновременно видимых элементов — свойство visibleItems, размера отступа между элементами — свойство margin и общей ширины слайдера — widthSlider.

  JavaScript

  const width = (this.widthSlider - this.options.margin * (this.options.visibleItems - 1)) / this.options.visibleItems;

  1 2 3

  const width = (this.widthSlider - this.options.margin * (this.options.visibleItems - 1)) / this.options.visibleItems;

  От ширины слайдера вычитаем сумму отступов уменьшенную на 1, т. к. отступ последнего видимого элемента не попадает в окно слайдера и полученную разность делим на количество видимых элементов.

• 4

  Вычисляет расстояние между элементами. Это значение понадобится в дальнейшем для получения координаты X каждого элемента галереи.

  JavaScript

  this.width = width + this.options.margin;

  1 2 3

  this.width = width + this.options.margin;

• 5

  Вычисляет ширину контейнера <div class="stage">, являющегося родителем для элементов для слайдера.

  JavaScript

  this.widths = this.width * this.count;

  1 2 3

  this.widths = this.width * this.count;

• 6

  Используя полученные значения, задаёт стили контейнеру stage и каждому элементу слайдера.

  JavaScript

  this.stage.style.width = this.widths + 'px'; for (let item of this.items) { item.style.cssText = `width:${width}px; margin-right:${this.options.margin}px;`; }

  1 2 3 4 5 6 7

  this.stage.style.width = this.widths + 'px';   for (let item of this.items) { item.style.cssText = `width:${width}px; margin-right:${this.options.margin}px;`; }

Полный код функции setSizeCarousel и комментарии к нему:

Получаем координату X каждого элемента адаптивной галереи изображений.

Теперь необходимо получить координату X каждого элемента слайдера, которые будут использоваться при листании галереи. За заполнение массива с координатами X отвечает функция setCoordinates, вызываемая из функции init. Функция простая и будет достаточно комментариев в самом коде.

Формирование навигации по адаптивной галерее изображений.

Теперь мы рассмотрим формирование визуальных элементов навигации по галерее:
1. кнопки «prev» и «next», сдвигающие слайдер на один элемент;
2. постраничная навигация в виде точек, прокручивающая слайдер на количество элементов, указанных в свойстве visibleItems.

Запускается формирование навигации по галерее из функции init, вызовом функции initControl.
Подключение элементов навигации осуществляется путём присвоения атрибутам data-hidden значения false. В рассматриваемой нами галерее, навигация кнопками разрешена по умолчанию, а разрешение постраничной навигации прописано в пользовательских настройках setup.

Нам необходимо будет получить ряд DOM-объектов, поэтому давайте ещё раз посмотрим на HTML-вёрстку блока навигации:

Рассмотрим, какие задачи выполняет функция initControl:

1. Получает объект контейнера с классом nav-ctrl и объект немаркированного списка с классом dots-ctrl. Эти объекты необходимы для того, чтобы показывать элементы навигации, устанавливая значение атрибута data-hidden в false или скрывать их, меняя значение data-hidden на true, в зависимости от значений свойств nav и dots в настройках адаптивной галереи.
   Кроме этого, на объект списка будет повешен обработчик события для управления постраничной навигацией.
2. Получает объекты кнопок управления «prev» и «next». На них будут повешены обработчики событий для прокручивания галереи вправо / влево на один элемент.
   При помощи функции setNavStyle кнопка «prev» визуально делается неактивной, т. к. при инициализации галереи текущим устанавливается первый элемент и, соответственно, нет никаких предыдущих элементов.
3. Вызывает функцию creatDotsCtrl, которая исходя из общего количества элементов галереи и значения свойства visibleItems заполняет список <ul class="dots-ctrl"></ul> элементами постраничной навигации. Первый элемент делает визуально активным.
   Записывает в массив координату X первого элемента каждой страницы.
   

Код самой функции initControl с подробными комментариями:

Функция setNavStyle управляет внешним видом кнопок «prev» и «next», делая неактивной кнопку «prev», если слайдер находится в самом начале. Если слайдер прокручен до самого конца, то неактивной будет кнопка «next». Во всех остальных случая обе кнопки выглядят активными.
Код функции очень простой:

Теперь рассмотрим, как правильно рассчитать и сгенерировать элементы постраничной навигации — ими являются элементы списка LI. Именно LI будет определять внешний вид пагинатора и управление галереей — клик по этому элементу вызовет прокрутку слайдера.

За формирование пагинации отвечает функция creatDotsCtrl, вызываемая из функции initControl. Функция, используя метод document.createElement(tag), создаёт новый элемент LI. Далее, запускается цикл while с шагом visibleItems. При каждой итерации цикла выполняются следующие операции:

1. Создаётся клон полученного элемента списка LI. Если это первый элемент в списке, то клону добавляется класс active.
2. С помощью метода parentElem.appendChild(elem) клон добавляется в конец объекта dotsCtrl и в массив spots. Этот массив в дальнейшем понадобится для получения индекса элемента в списке.
3. Рассчитывается следующую координату Х, к которой необходимо прокрутить слайдер при постраничной навигации. При расчёте используется полученный ранее максимальный индекс max.

Код функции creatDotsCtrl и комментарии к нему:

Функция setDotsStyle управляет внешним видом элементов постраничной навигации, выделяя элемент, соответствующий группе изображений, до которых была прокручена галерея. Код функции несложный, поэтому можно обойтись комментариями в самом коде:

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

Регистрация обработчиков событий адаптивной галереи изображений

Регистрация обработчиков событий адаптивной галереи изображений осуществляется в функции registerEventsHandler, вызываемой из функции init. Обработчик назначается вызовом метода addEventListener, который привязывается к элементу, на котором событие регистрируется.

Итак, инициализация и построение адаптивной галереи изображений закончены. Прежде чем рассматривать функционал её скроллинга, давайте подведём итог и кратко изложим, что было сделано:

1. Объединены дефолтные и пользовательские настройки, на основании которых создаётся и функционирует галерея.
2. Исходя из текущего размера окна браузера и значения свойства visibleItems получены размеры отдельных элементов галереи, слайдера и самой галереи в целом.
3. Получены координаты X каждого элемента галереи.
4. В соответствии с настройками, создано пошаговое и постраничное управление галереей.
5. Установлены обработчики событий, позволяющие прокручивать галерею.

Прокрутка адаптивной галереи изображений.

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

Принцип прокручивания адаптивной галереи изображений.

У нас есть контейнер stage, в котором в одну строку размещены изображения, и являющийся дочерним элементом контейнера slider.
Контейнер slider имеет стиль overflow: hidden, в результате чего отображается только та часть stage, которая находится внутри границ slider, остальная часть будет скрыта. Ширина slider и количество отображаемых элементов зависит от значения свойства visibleItems.

Меняя позиционирование контейнера stage по горизонтали, можно отображать в области контейнера slider изображения, скрытые в данный момент. Для смещения stage будем использовать свойство transform:translateX(), а за точку отсчёта смещения возьмём левую границу контейнера slider.
Таким образом, чтобы прокрутить галерею к нужному изображению, необходимо подставить соответствующее значение в свойство transform:translateX().
Значения координат всех изображений были получены и записаны в массив coordinates при вызове функции setCoordinates.

Данный функционал реализован в двух основных функциях:

1. getNextCoordinates — возвращает координату Х элемента, до которого должен переместиться контейнер stage;
2. scroll — непосредственно реализует механизм прокручивания, а также изменяет визуальное отображение элементов пошаговой и постраничной навигации по мере прокручивания галереи.

Рассмотрим работу этих функций подробнее.

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

Функция принимает один аргумент — direction, имеющий два значения, определяющие направление перемещения:
-1 — переход к предыдущему элементу;
1 — переход к следующему элементу.

Кроме этого, функция использует свойства конструктора:

1. current — индекс координаты текущего элемента;
2. count — количество элементов в галерее;
3. visibleItems — количество элементов отображаемых в слайдере;
4. max — максимальный индекс, который может быть у текущего элемента.

Используя полученный аргумент и свойства конструктора, функция может накладывать ограничения на прокручивание галереи:
— попытка перейти к предыдущему элементу, когда текущим является первый элемент;
— попытка перейти к следующему элементу, когда текущий элемент имеет индекс равный max.

Код функции getNextCoordinates и комментарии к нему:

Реализация прокрутки адаптивной галереи изображений.

Как я писал выше, за непосредственную реализацию прокрутки отвечает функция scroll. Функция принимает два аргумента:
1. координата X, полученная функцией getNextCoordinates;
2. transition — время анимации прокрутки.

Может возникнуть резонный вопрос: зачем передавать время анимации отдельным параметром, когда оно прописано в настройках галереи и его значение есть в объекте options?
Всё упирается в постраничную навигацию. Если прокрутка будет на соседнюю страницу, то базового значения baseTransition будет достаточно. А если необходимо перейти сразу на несколько страниц или к последней странице галереи? В этом случае, при использовании значения baseTransition, изображения просто промелькнут по экрану без заметной плавности, что не очень красиво. Поэтому, при постраничной навигации значение transition рассчитывается в зависимости от того, на сколько страниц нужно проскроллить галерею. Подробнее это будет описано в разделе постраничной навигации.

При рассмотрении функции scroll необходимо учесть ещё один очень важный момент — это переключение, по мере прокрутки, состояния элементов навигации из неактивного состояния в активное и наоборот. Для этого в код добавлен вызов двух функций (setNavStyle и setDotsStyle), которые будут менять стили отображения кнопок управления и элементов постраничной навигации в зависимости от текущего индекса.

Подробно описывать работу функции scroll нет необходимости — она достаточная простая, вполне хватит комментариев в JS-коде функции:

Код функции scroll и комментарии к нему:

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

Управление прокруткой адаптивной галереи изображений.

Напомню, что все обработчики событий, вызывающие функции управления прокруткой галереи, находятся в функции registerEventsHandler, рассмотренной ранее.

Автоматическая прокрутка адаптивной галереи изображений.

Для включения автоматической прокрутки, необходимо присвоить свойству autoScroll значение «true». Делается это в пользовательских настройках — объект setting. Если автоскролл включен, то с помощью метода setInterval с периодичностью, заданной в свойстве interval статического свойства defaults, вызывается функция autoScroll.

Управление прокруткой адаптивной галереи изображений с помощью кнопок «prev» и «next».

При нажатии на кнопку «prev» или «next» вызывается функция navControl. Направление скролла галереи определяется по значению data-атрибута data-shift. В зависимости от его значения, контейнер с изображениями stage смещается или к предыдущему, или к следующему изображению.

Код функции navControl и комментарии к нему:

Постраничная прокрутка адаптивной галереи изображений с помощью пагинатора.

Управление постраничной прокруткой галереи реализовано в функции dotsControl, которая решает две задачи:

1. получения координаты X первого изображения на странице, до которой будет прокручиваться галерея;
2. расчёт времени, за которое галерея прокрутиться к выбранной странице, с учётом количества изображений, на которые нужно проскроллить галерею.

Для получения координаты X, функция dotsControl не обращается к функции getNextCoordinates, а использует свой алгоритм:

• 1

  Получает объект элемента навигации, по которому был сделан клик.

• 2

  Находит аналогичный элемент и его индекс в массиве spots — этот массив был создан при формировании постраничной навигации и содержит все элементы пагинатора.
  Для поиска индекса элемента в массиве spots используем встроенный метод indexOf, который возвращает индекс элемента в массиве или -1, если такого индекса нет.

• 3

  Получает индекс изображения, до которого нужно прокрутить галерею, путём умножения индекса элемента пагинатора на значение свойства visibleItems.

Для расчёта времени анимации, используя индексы текущей и полученной координаты X, вычисляем, на сколько элементов (изображений) будет прокручена галерея. Это значение умножаем на коэффициент и прибавляем к базовому значению baseTransition.
Таким образом, время анимации будет напрямую зависеть от того, сколько страниц (количество изображений на этих страницах) необходимо прокрутить.

Код функции dotsControl и комментарии к нему:

Управление прокруткой адаптивной галереи изображений с помощью клавиатуры.

При таком способе управления используются клавиши «←» (влево) и «→» (вправо), имеющие виртуальные десятизначные коды 37 и 39 соответственно.
Для включения управления с помощью клавиатуры, необходимо в пользовательских настройках setting, присвоить свойству keyControl значение «true». По-умолчанию установлено значение «false», т. к. при размещении нескольких галерей на одной странице, управление с клавиатуры будет всеми галереями одновременно.

Реализовано такое управление в функции keyControl. Подробно расписывать работу функции не буду — код очень простой, достаточно комментариев в самом коде.

Управление прокруткой адаптивной галереи изображений с помощью колёсика мыши.

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

При такой регистрации обработчика события, функция wheelControl будет вызвана, только если указатель мыши находится над DIV’ом с классом ‘slider’ конкретного экземпляра галереи — this.gallery. Такой подход обеспечивает корректное управление при любом количестве галерей на одной странице.

Для определения направления прокрутки галереи используем свойство deltaY, показывающее количество прокрученных пикселей по вертикали со знаком, соответствующим направлению прокрутки.

Код функции wheelControl и комментарии к нему:

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

Рассмотрим ещё два очень похожих способа прокручивания галереи: перетаскивание с помощью мыши и листание галереи пальцем (swipe) на мобильных устройствах. Несмотря на то, что первый способ основан на событиях мыши, а второй на touch событиях, они очень похожи и используют одни и те же функции.

Ещё раз обратимся к функции registerEventsHandler, к той части, где регистрируются mouse events и touch event

Как видео из представленного кода, независимо от источника, события обрабатываются одними и теми же функциями:

tap

нажатие левой кнопки мыши или касание экрана пальцем;

drag

перемещением мыши или пальца по экрану;

release

отпускание кнопки мыши или палец отрывается от экрана, а также выход за пределы контейнера «slider» курсора мыши.

При работе этих функций будет требоваться информация о текущем положении курсора или пальца. Для этой цели у нас есть статическая функция xpos, которая возвращает координату X текущего положения курсора мыши или пальца на экране мобильного гаджета без учета прокрутки.
Напомню JS-код функции:

Работа функции «tap».

Функция tap, используя вызов функции xpos, получает координату X, с которой начато перетаскивание и устанавливает флаг нажатия.

Работа функции «drag».

Функция drag отслеживает перемещение курсора мыши или пальца по экрану и, при выполнении определённых условий, передаёт в функцию scroll разницу между текущей координатой X и смещением курсора от точки, с которой начато перетаскивание.

Остановимся подробнее на условиях, влияющих на работу функции:

• 1

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

  JavaScript

  if (this.pressed === false) return;

  1 2 3

  if (this.pressed === false) return;

• 2

  Получив смещение курсора мыши или пальца от начальной позиции shift, проверяем его размер и, если он меньше трёх пикселей, функция прекращает свою работу. Таким образом исключается случайное смещение (дрожание) курсора мыши или пальца.

  JavaScript

  if (Math.abs(this.shift) < 3) return;

  1 2 3

  if (Math.abs(this.shift) < 3) return;

• 3

  Накладывается ограничение на прокрутку галереи в её крайних положениях.
  Допустим, галерея находится в исходном состоянии и первый её элемент является активным. При попытке перетащить её вправо, как для просмотра предыдущего изображения, галерея смещается максимум на величину указанную в свойстве options.limit, а после этого плавно возвращается в исходное состояние.

  

  Аналогичное поведение будет у галереи, если она прокручена до последнего элемента, но её тянут влево.

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

  1. Общую ширину всех невидимых в данный момент элементов слайдера:

     JavaScript

     const remaining = this.widths - this.width * this.options.visibleItems;

     1 2 3

     const remaining = this.widths - this.width * this.options.visibleItems;

  2. Разницу между текущей координатой и смещением курсора от точки старта, с которой начато перетаскивание:

     JavaScript

     const delta = this.coordinates[this.current] - this.shift;

     1 2 3

     const delta = this.coordinates[this.current] - this.shift;

  Полный код поведения галереи изображений в крайних положениях:

  JavaScript

  // общая ширина всех невидимых в данный момент элементов слайдера const remaining = this.widths - this.width * this.options.visibleItems; // разница между текущей координатой и смещением курсора от // точки старта, с которой начато перетаскивание const delta = this.coordinates[this.current] - this.shift; // останавливаем прокручивание галереи при достижении первого или последнего элемента if (delta > this.options.limit || Math.abs(delta) - remaining > this.options.limit) return;

  1 2 3 4 5 6 7 8 9

  // общая ширина всех невидимых в данный момент элементов слайдера const remaining = this.widths - this.width * this.options.visibleItems; // разница между текущей координатой и смещением курсора от // точки старта, с которой начато перетаскивание const delta = this.coordinates[this.current] - this.shift; // останавливаем прокручивание галереи при достижении первого или последнего элемента if (delta > this.options.limit || Math.abs(delta) - remaining > this.options.limit) return;

Полный код функции drag и комментарии к нему:

Работа функции «release».

Функция release обрабатывает окончание пролистывания галереи изображений и начинает работу в момент, когда отпускается левая кнопка мыши или палец отрывается от экрана, а так же, когда курсор мыши или палец выходит за пределы видимой области галереи.

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

На представленном рисунке показано перемещение галереи влево, при этом элемент «Element 4», являющийся текущим, сдвинут на расстояние меньше половины свой ширины. В такой ситуации, галерея вернётся в исходное положение и «Element 4» останется текущим.
Если «Element 4» сдвинуть на расстояние большее половины его ширины, то галерея прокрутиться дальше и текущим станет «Element 5».

Адаптация галереи изображений к изменению разрешения.

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

1. Ширина видимой области слайдера (viewport), в которой прокручиваются изображения, зависит от ширины страницы.
2. Ширина элементов (изображений) рассчитывается в зависимости от размера вьюпорта и количества одновременно выводимых изображений.
3. Ширина контейнера с классом stage зависит от рассчитанной ширины изображений.

Но для полноценной адаптивности этого недостаточно. Нужно заставить меняться настройки галереи в зависимости от разрешения экрана. Для этой цели добавим в пользовательские настройки свойство adaptive. В качестве его значения используем ассоциативный массив, ключами которого будут разрешения экрана, при которых необходимо изменить настройки галереи изображений, а значения будут представлять объекты, содержащие эти настройки, записанные в литеральной форме.

Код объекта adaptive и комментарии к нему:

Для обработки ассоциативного массива, являющегося значением свойства adaptive и получения настроек, соответствующих текущему разрешению экрана, создадим функцию setAdaptiveOptions. Алгоритм работы функции:

1. Создаёт массив из ключей, являющимися контрольными точками (break points).

2. Сравнивая ширину страницы (документа) со значениями break point из массива, определяет ближайшую контрольную точку «снизу». Эта точка будет служить ключом к объекту с настройками для данного диапазона разрешений.
   Например, разрешение экрана 640px. Ближайшие к нему контрольные точки — 560 и 768. Выбрана будет 560.

3. Считывает все свойства в объекте с полученным ключом и записывает их значения в объект options поверх существующих.

Код функции setAdaptiveOptions и комментарии к нему:

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

Итак, что мы имеем на данный момент. При запуске адаптивной галереи изображений, происходит её инициализация и подключаются настройки соответствующие текущему разрешению экрана монитора или мобильного гаджета. В результате, не зависимо от разрешения, галерея будет выглядеть оптимально для данного экрана.
Кажется, на этом написание скрипта можно закончить. К сожалению, есть одно но. Например, пользователь просматривал галерею на планшете или смартфоне в ландшафтном режиме, а потом повернул в портретный режим. Или другой пример, пользователь самостоятельно изменил размеры окна браузера. Что произойдёт в этом случае? Ничего. Настройки галереи останутся без изменения и, скорее всего, её просматривать станет неудобно.

Что объединяет эти два примера? И в одном, и в другом случае меняется разрешение экрана по горизонтали. Другими словами возникает событие resize. Следовательно, чтобы оптимизировать галерею под новое разрешение, необходимо назначить обработчик этому событию, который повторно запустит инициализацию галереи через вызов функции init.

Инициализация адаптивной галереи изображений при изменении разрешения экрана.

Первое, что нужно сделать — это назначить обработчик для события resize. Для этого, в самое начало функции registerEventsHandler, регистрирующей обработчики событий, добавим следующий JS-код:

Как видно из кода, при изменении разрешения, будет вызываться функция resize. Может возникнуть вопрос, а почему сразу не вызвать функцию init и не перестроить галерею под новое разрешение? Дело в том, что необходимо запомнить, а после инициализации галереи вывести активным именно то изображение, которое было активным до изменения разрешения.

Давайте разберём алгоритм работы функции resize:

1. Вызывает функцию init, запуская инициализацию и построение каркаса галереи изображений с учётом нового разрешения.

2. Получает новый индекс и координату X текущего элемента. Это очень важно, когда пользователь просматривает последние изображения галереи. Давайте посмотрим на рисунок и всё станет понятно без лишних объяснений.

   

3. Вызывает функцию scroll для докрутки галереи (при необходимости) к текущему элементу.

Для уменьшения нагрузки на браузер, обработку изменившихся параметров функция resize производит через заданный период времени, используя таймер-планировщик setTimeout.

Полный код функции resize и комментарии к нему:

На этом создание адаптивной галереи изображений закончено. Посмотреть пример галереи и скачать HTML-вёрстку и полный JS-код, Вы можете по ссылкам, указанным в начале страницы.