Как задать значение переменной, равное ширине объекта в html?

Нужно задать в переменную width ширину элемента с классом imagesLi. Я уже попробывал это сделать, но безуспешно. Либо нужно сделать это как то по другому. Так же нужно учесть что использовать я могу сейчас только чистый js. JS

var width = document.querySelector(".imagesLi").clientWidth;
var list = document.querySelector(".images");
var pictures = document.querySelectorAll(".imagesLi");  
var position = 0;  
document.querySelector(".prev").onclick = function() {
    position += width; // вычисляем положение картинки
    // рассчитываем положение последней картинки
    position = Math.min(position, 0)
    list.style.marginLeft = position + "px";
};
document.querySelector(".next").onclick = function() {
    position -= width; // вычисляем положение картинки
    // последнее передвижение вправо может быть не на 3, а на 2 или 1 элемент 
    position = Math.max(position, -width * (pictures.length - 1));
    list.style.marginLeft = position + "px";
};

html

<div class="carousel"> 
                <input type="button" class="arrow prev" value="<">
                <div class="gallery">
                    <ul class="images">
                        <li class="imagesLi"><img src="CtImg/Бомбер (1).jpg"></li>
                        <li class="imagesLi"><img src="CtImg/Кепка (1).jpg"></li>
                        <li class="imagesLi"><img src="CtImg/Полотенце (2).jpg"></li>
                        <li class="imagesLi"><img src="CtImg/Шапка1.jpg"></li>
                        <li class="imagesLi"><img src="CtImg/Шорты1 (1).jpg"></li>
                        <li class="imagesLi"><img src="CtImg/people_7_man_hoodie_oversize_front_melange_500.jpg"></li>
                        <li class="imagesLi"><img src="CtImg/people_5_man_winter_jacket_front_black_500.jpg" alt=""></li>
                        <li class="imagesLi"><img src="CtImg/people_4_manshortfull_front_white_500 (1).jpg" alt=""></li>
                        <li class="imagesLi"><img src="CtImg/people_4_manshortfull_front_white_500.jpg" alt=""></li>
                        <li class="imagesLi"><img src="CtImg/people_7_man_hoodie_oversize_front_darkblue_500 (1).jpg" alt=""></li>
                        <li class="imagesLi"><img src="CtImg/people_7_man_hoodie_oversize_front_terracotta_500.jpg" alt=""></li>
                        <li class="imagesLi"><img src="CtImg/Полотенце (2).jpg" alt=""></li>
                        <li class="imagesLi"><img src="CtImg/Шорты1 (1).jpg" alt=""></li>
                        <li class="imagesLi"><img src="CtImg/Шорты1 (3).jpg" alt=""></li>
                    </ul>
                </div>
                <input type="button" class="arrow next" value=">">
            </div>