My dilemma involves a carousel (specifically Owl Carousel) with controls that need to be vertically centered. Due to the structure, I have had to absolutely position the previous and next arrow indicators. Given the responsive nature of the page, their positioning is not fixed as it may change based on different screen sizes. Additionally, the size of these controls can also vary.
https://i.sstatic.net/my7vn.png
To tackle this issue, I devised a function that executes during page load and whenever the window is resized. This function calculates the height of the image within the carousel and the height of the controls, subtracts the latter from the former, divides by two, and sets this result as the margin-top for the controls.
Although my approach works, doubts linger regarding whether or not I am handling all the variables accurately in JavaScript. Is there a specific order in which JavaScript processes statements? My expertise lies more in CSS, so JavaScript has always been somewhat challenging for me.
Is there a more efficient way to write this code?
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);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>I worry that this question might not provide enough detail for this platform and could potentially get flagged. If that's the case, please direct me to a more suitable community where I can seek assistance. Thank you!