Estoy tratando de entender la magia detrás de los controles deslizantes y actualmente sigo este tutorial en YT. En el minuto 8:50, usa la propiedad clientWidth de una diapositiva para trasladar el envoltorio del control deslizante a la izquierda por el ancho de una imagen (todas tienen la misma escala).

Su código (y el mío) se ve así:

 <div class="carousel"> <div class="carousel__item"> <img class="test" src="../images/3.jpeg" id="last-clone"/> <img class="test" src="../images/1.jpeg" /> <img class="test" src="../images/2.jpeg" /> <img class="test" src="../images/3.jpeg" /> <img class="test" src="../images/1.jpeg" id="first-clone"/> </div> </div> <script> const slidesWrapper = document.querySelector('.carousel__item'); const slides = document.querySelectorAll('.carousel__item img'); const size = slides[0].clientWidth; let counter = 1; //refers to the current active slide slidesWrapper.style.transform = `translateX(${(-size * counter)}px)`; console.log(slides); //when inspecting first items clientWidth, the value is correct console.log(`slides[0].clientWidth is ${slides[0].clientWidth}`); //logs an incorrect value </script>

Cuando inspecciono el primer archivo console.log , el ancho del cliente del primer elemento es el valor correcto: es el mismo valor que puedo ver al pasar el mouse sobre el elemento en las herramientas de desarrollo.

Pero cuando registro el valor directamente, es completamente diferente:

Esto es raro, ¿alguien puede explicarme qué está pasando aquí?