не срабатывает offsetWidth при изменении ширины элемента

Пишу код на слайдер и не срабатывает offsetWidth на элемент. Как при перегрузке страницы, так и без. Пытался увидеть через resize, но цифры остаются неизменными. Подскажите пожалуйста в чем может быть дело?

HTML

    <div class="slider">
        <div class="slider-line">
               <img  src="./assets/img/welcome-slider/1.jpg" alt="">
               <img  src="./assets/img/welcome-slider/2.jpg" alt="">
               <img  src="./assets/img/welcome-slider/3.jpg" alt="">
               <img  src="./assets/img/welcome-slider/4.jpg" alt="">
               <img  src="./assets/img/welcome-slider/5.jpg" alt="">
        </div>
    </div>

JS

window.addEventListener('resize', showSlide);
console.log('resize');
function showSlide() {
   let images = document.querySelectorAll('.slider-line img'); 
   let sliderWidth = document.querySelector('.slider').offsetWidth;
   console.log(sliderWidth);
   sliderLine.style.width = sliderWidth * images.length + 'px';
   images.forEach(item =>item.style.width = sliderWidth + 'px');
}
showSlide();

CSS

.slider {
  width: 1000px;
  height: 750px;
  top: 0px;
  left: 435px;
  position: absolute;
  overflow: hidden;
}
.gradi {
  position: absolute;
  width: 500px;
  height: 750px;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  z-index: 1;
}
.slider-line{
  width: 5000px;
  height: 750px;
  display: flex;
  position: relative;
  left: 0px;
  transition: all ease 1s;
}