Почему clientWidth равно 0?

Question

Я новичок, пишу веб-сайт и пытаюсь добавить карусель изображений на свою домашнюю страницу. У меня на экране отображается 6 изображений рядом друг с другом. Что я пытаюсь сделать, так это переместить мои изображения на 1 влево при загрузке веб-сайта, чтобы первым отображался слайд 1. Вот часть моего индекса. html:

    <div class="cover-art-carousel">
        <div class="slide">
            <img src="./covers/slide6.jpg" id="lastClone">
            <img src="./covers/slide1.png">
            <img src="./covers/slide2.png">
            <img src="./covers/slide3.jpg">
            <img src="./covers/slide4.jpg">
            <img src="./covers/slide5.jpg">
            <img src="./covers/slide6.jpg">
            <img src="./covers/slide1.png" id="firstClone">
        </div>
    </div>

    <button id="prevBtn">Prev</button>
    <button id="nextBtn">Next</button>
    
    <script src="app.js"></script>`

А это мой js:

const carouselSlide = document.querySelector('.slide');
const carouselImages = document.querySelectorAll('.slide img');

//Buttons
const prevButton = document.querySelector('#prevBtn');
const nextButton = document.querySelector('#nextBtn');

//Counter
let counter = 1;
const size = carouselImages[0].clientWidth;

carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';

Когда я загружаю сайт, clientWidth равно 0, хотя Я знаю, что должно быть 300. Самое странное, что если я добавляю предупреждение в свой JS, оно работает нормально. Я уверен, что мне не хватает чего-то очевидного, но если бы кто-нибудь мог помочь, это было бы здорово. Надеюсь, это имеет смысл. Спасибо!

Answer 1

оберните ваш js скрипт следующим образом:

window.onload = function(){ the rest of your js.....

}

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

Answer 2

Изменить: извините. Этот ответ явно неверен. Я просто подумал, поскольку document.getelementsbyclassname() возвращает свой ответ в виде массива (даже если есть только один элемент), document.querySelector() тоже будет делать это.

Я не уверен, но думаю, что:

const carouselSlide = document.querySelector('.slide');

обычно может возвращать несколько элементов ([Element1, Element2, ..]). Несмотря на то, что есть только один элемент с этим именем класса, он все равно будет возвращен в виде массива ([element]).

Таким образом, вам нужно будет получить к нему доступ следующим образом:

carouselSlide[0].style.transform = 'translateX(' + (-size * counter) + 'px)';