Как сделать точки внутри полноэкранного слайдера Фоторама

На мой взгляд, Fotorama самый идеальный слайдер среди существующих — быстрый, простой и с отличным API. Но вот воткнуть точки навигации на сам слайдер при использовании data-height в 100% оказалось не самой тривиальной задачей. Но API и немного стилей позволили решить эту проблему.

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

.fotorama__nav--dots .fotorama__nav__frame {
  height: 0px;
}

 
Затем расположим точки внизу экрана с небольшим отступом:

.fotorama__nav-wrap {
  position: absolute;
  bottom: 5%;
}

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

$('.fotorama').on('fotorama:ready', function (e, fotorama) {
    $('.fotorama__nav--dots').addClass('height-fix');
});

 
Стили класса:

.height-fix {
  height: 10px;
}

 
Этот способ я задействовал в одном из своих шаблонов для WordPress:

Слайдер Фоторама точки внутри слайдера