Positioning the left-right arrow buttons for a carousel

Question

I have a carousel (Owl Carousel) with vertically centered controls. Because of the structure, I have to absolutely position the previous and next arrow. Because the page is responsive, their position is dynamic. The size of the controls may also change.

I've written a function that runs on load and resize. It gets the height of the image and the height of the controls, subtracts the latter from the former, divides by two, and then uses that number as the controls' margin-top.

It works, but I'm questioning if I'm getting and using all the variables correctly. Does JavaScript read in order? Where it runs the first line, then the next, then the next... I'm strong in CSS but JS has always been a crutch.

Can I write this more efficiently?

function centerCarouselControls() {
  var carouselImage = $('.carousel-card > img');
  var carouselControls = $('.owl-nav > div');
  var carouselHeight = carouselImage.outerHeight();
  var controlHeight = carouselControls.outerHeight();
  var controlMargin = (carouselHeight - controlHeight) / 2;
  carouselControls.css('margin-top', controlMargin);
}

$('.carousel-card > img').load(centerCarouselControls);
$(window).on('resize', centerCarouselControls + 'px');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

Is it not possible to wrap both the 'arrow' and the image inside a relative div then do some absolute position and stuff?

jsfiddle so you can change the height to see it change without javascript: https://jsfiddle.net/3bm2hp5f/1/

Code:

html, body {
  height: 100%;
  width: 100%
}

<div id="resizable" style="width: 30%; height: 50%; resize: both; position: relative; display:inline-block; border: 3px solid black">
  <div style="position: absolute; top: 50%; transform: translateY(-50%);">
    &lt;
  </div>
  <image style="width: 100%; height: 100%;"></image>
</div>
<div style="display: inline-block">
 something else
</div>