Find size for elements to fit in certain width
Using a template variable in the script means you have this script in the HTML document and repeat it for each owl carousel. That is a vary bad idea, mostly because that way you may have multiple functions with the same name. 

Generally your HTML shouldn't "know about" (reference) your JavaScript. Instead the JavaScript should find the elements it wants to attach itself to.

Put the function in a separate script file (together with all of your other scripts, wrapped in an IIFE) and include it once with &lt;script src="..."&gt; at the end of the HTML.

Then place a class on all owl carousels you want to apply the function to and use that to call the script for all and any elements with this class. For example, with jQuery:

(function() {

    $('.owl-carousel--adjust-height').each(function () {
        _AdjustHeightOwlDots($(this));
    };

    function _AdjustHeightOwlDots(owlCarousel) {
        // ...
     }

})();


Now, inside "find" the sub elements (and save references to avoid duplicate queries of the same elements):

const dots = owlCarousel.find('.owl-dots');
const dotRowWidth = dots.width();
const amountOfDots = dots[0].childElementCount;
const dotButtons = dots.find('&gt; button');
const singleDotWidth = dotButtons.width();


(You learn new things every day. Never heard of childElementCount before this - and it's not even a new thing.)

In setNewStyle the query is also repeated and can be replaced with chaining (or the alternative syntax for .css() using an object) and also can be moved outside the function:

const dotButtonSpans = dotButtons.find('&gt; span');

const setNewStyle = function(hw, margin) {
    dotButtonSpans
        .css('width', `${hw}px`)
        .css('height', `${hw}px`)
        .css('margin', `5px ${margin}px`);
}


Or

const setNewStyle = function(hw, margin) {
    dotButtonSpans.css({
        width: `${hw}px`, 
        height: `${hw}px`, 
        margin: `5px ${margin}px`
    });
}


Finally the big if block can be replaced with a simple calculation (including removing the part that makes maxDotWidth even, instead using | 0 as a short cut to round numbers to integers):

const size = ((maxDotWidth / 4) | 0) + 1;
const margin = maxDotWidth &lt; 2 ? 1 : (((maxDotWidth - 2) / 4) | 0) + 1;

setNewStyle(size , margin);