Денис Букреев

С помощью триггера 'to.owl.carousel' смог добиться нужного эффекта

// если слайд последний
if ( $('.owl-item.active').index() === $('.owl-item').length - 1 ) {
  it.carousel.trigger('to.owl.carousel', [0, 200]);
}

тоже самое можно и в обратную сторону

Решил проблему с помощью атрибута <textarea wrap="hard"></textarea> и ответа Артем

codepen.io/jaromvogel/pen/jWjWqN

Решение: WS закрыть. Он не сможет.
Открыть Sublime, создать новые файлы .jade и перекопировать туда весь код из старых файлов. Старые удалить.
Кек.

У <video> ставим такие стили:

min-width: 100vw;
min-height: 100vh;
position: absolute; // либо fixed
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);

В общем, решил проблему так: берем большее изображение по размеру и с помощью transform меняем размер с шагом 0.2 - так качество не теряется
Я, таким образом, просто нарезал картинки с размер 1.2 относительно нужного, а в стилях просто прописал transform: scale(0.8), а при увеличении transform: scale(1) - потерь в качестве нет.
Либо можно просто для ретины взять вдвое большую картинку и так же с шагом 0.2 увеличивать/уменьшать

Вот как я решил данную задачку (все оказалось в разы проще, чем я думал):

// timeline - блок с горизонтальным скроллом
timeline.onmousedown = () => {
  let pageX = 0;

  document.onmousemove = e => {
    if (pageX !== 0) {
      timeline.scrollLeft = timeline.scrollLeft + (pageX - e.pageX);
    }
    pageX = e.pageX;
  };

  // заканчиваем выполнение событий
  timeline.onmouseup = () => {
    document.onmousemove = null;
    timeline.onmouseup = null;
  };

  // отменяем браузерный drag
  timeline.ondragstart = () => {
    return false;
  };
};

https://w1c.ru/html_css-15.html
вот, что-то подобное видел, но это не совсем то

Нашел.

Надо использовать такую конструкцию:

@css {
	css
}

т.е. оборачиваем игнорируемый код в @css {}