Как мне постоянно проверять высоту видимого изображения?

Question

У меня есть ползунок изображений, и мне нужно, чтобы высота ползунка всегда была такой же, как у видимого в данный момент изображения внутри ползунка.

Я настроил этот код для автоматической проверки высоты изображения внутри слайдера, но он проверяет только первое изображение. Когда ползунок поворачивается к следующему изображению, высота ползунка становится равной «0 пикселей», но когда ползунок возвращается к первому изображению, он правильно регистрирует высоту.

Как мне получить этот код, чтобы правильно зарегистрировать высоту текущего изображения ползунка и применить эту высоту к ползунку.

HTML

<div class="slider">
    <img src="#"/>
    <img src="#"/>
    <img src="#"/>
</div>

JQuery

function checkForChanges() {
    var cool = $('.slider img').height() + "px";
    $('.slider').css('height', cool);
}
setInterval(checkForChanges, 1000);

Answer 1

Это ванильное решение для JavaScript.

Вам нужно будет назначить класс ' slide-img ' для каждого изображения, чтобы оно работало. Вам нужно будет заполнить мясо для цикла. Но это получит высоту каждого изображения.

(function checkHeight() {

    // Create array of images
    let arr_imgs = document.querySelectoryAll('.slide-img');

    // for each image -> do somthing
    arr_imgs.forEach(function(e) {

        let imgHeight = e.clientHeight();

    });


});