Иван Иванов

a:focus{
 outline: 0;
}

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

Copy-Paste.

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

В общем, если ОЧЕНЬ нужно, то можно сверстать "резиновый" прелоадер, основной контент скрыть.
В шапке поставить ваш код с вычислением размеров, который в итоге сделает что-то вроде

let styleElem = document.createElement('link')
styleElem.rel = 'stylesheet'
styleElem.href = '/parth/to/my.css' // подставляйте нужную css-ку
document.getElementsByTagName('head')[0].appendChild(styleElem)

При этом в css прописано скрыть прелоадер, и показать контент. Это произойдет только после загрузки css-ки.

Хотя описание задачи очень странное, есть подозрение что вы пытаетесь сделать что-то простое через ж.

Например C# + WPF.

Мне помог плагин Highlight Matching Tag:
https://github.com/vincaslt/vscode-highlight-match...

Логикой. Имеете две точки, стартовая и конечная, пока они пустые. При первом клике делаете проверку, если стартовой точки нет, то этот клик и будет стартовой точкой, значит записываем координаты клика в стартовую точку. В этот момент должно работать событие мыши mousemove, которое делает проверку, есть ли стартовая точка и нет конечной, тогда рисуем прямоугольник от стартовой точки до точки координат мыши. При повторном клике опять делается проверка, если стартовая точка есть а конечной нет, то записываем точку мыши в конечную. В этот момент условие в mousemove больше не работает, т.к. есть конечная точка, прямоугольник закрыт. Можно его нарисовать окончательно.
У fillRect конечная точка описывается шириной и высотой, поэтому нужно ее высчитывать вот так:

width = xEnd - xStart;
height = yEnd - yStart;