Struggling with creating a custom carousel/slider element and running into an issue that doesn't seem to make any sense.
Attempting to retrieve image size using jQuery on document load results in incorrect width/height calculations. Initially thought it might be due to the document not fully loaded when the page displays, but even after using the https://github.com/desandro/imagesloaded library, the problem persists.
Luckily, I was tinkering with this on CodePen, so here's the link for reference: Codepen
$( document ).ready(function() {
$(".carousel").imagesLoaded(function(){
//shows logo before images are loaded
$(".logo-container").addClass("hide");
$(".carousel").removeClass("hide");
//get carousel dimensions
const carouselEl = $(".carousel");
//image
const imageEl = $("img.active");
//get active dimensions
const elWidth = imageEl.width();
const elHeight = imageEl.height();
console.log(elWidth,elHeight);
//set carousel dimensions
carouselEl.width(elWidth);
carouselEl.height(elHeight);
});
});
Am I overlooking something crucial?
Appreciate your assistance.