.clientWidth/.width in JavaScript is not working on img tag

Question

I want to make a JavaScript slider for that I need to get the width of the images so I can apply translateX on them but when I try to get the width of first image of the div it returns 0.

I'm pretty sure that the error is in the var size = carouselImg[0].clientWidth; line but I don't know how to fix it. I placed the JavaScript code below the HTML.

var carouselSlide = document.querySelector(".carousel-slide");
var carouselImg = document.querySelectorAll(".carousel-slide img");

let count = 1;

var size = carouselImg[0].clientWidth;

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

console.log(size);

*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

.carousel-container{
 width: 900px;
 border: 3px solid black;
 margin: auto;
}

.carousel-slide{
 display: flex;
 height: 300px;
}

<div class="carousel-container">
 <div class="carousel-slide">
  
  <img src="img4.png" id="lastImg" alt="">
  <img src="img1.png" alt="">
  <img src="img2.png" alt="">
  <img src="img3.png" alt="">
  <img src="img4.png" alt="">
  <img src="img1.png" id="firstImg" alt="">

 </div>
</div>

Are you waiting for the images to finish loading before attempting to fetch their widths? If you fetch the width without waiting, the width will be `0` because the image hasn't loaded yet. Note that a `$(document).ready( ... )` will **not** wait for the images to load, however a `$(window).load( ... )` *will*. [More here](https://stackoverflow.com/questions/544993/official-way-to-ask-jquery-wait-for-all-images-to-load-before-executing-somethin). — Tyler Roper, Sep 17 '19 at 20:06

score 2 · Accepted Answer · answered Sep 17 '19 at 20:43

The browser does not have time to load the image. The clientWidth will be 0 until the image either loads or is shown as a broken image. Also, setting alt="" will always make a broken image's clientWidth be 0 even after the browser decides that the image is broken. (In the question's snippet, the images' alt attributes are set this way.) This was all tested in Chrome 76.

The snippet below should work (tested in Chrome 76). I put your script in window.onload and gave the images alt attributes.

window.onload = function() {
  var carouselSlide = document.querySelector(".carousel-slide");
  var carouselImg = document.querySelectorAll(".carousel-slide img");

  let count = 1;

  var size = carouselImg[0].clientWidth;

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

  console.log(size);
}

*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

.carousel-container{
 width: 900px;
 border: 3px solid black;
 margin: auto;
}

.carousel-slide{
 display: flex;
 height: 300px;
}

<div class="carousel-container">
 <div class="carousel-slide">
  
  <img src="img4.png" id="lastImg" alt="1">
  <img src="img1.png" alt="2">
  <img src="img2.png" alt="3">
  <img src="img3.png" alt="4">
  <img src="img4.png" alt="5">
  <img src="img1.png" id="firstImg" alt="6">

 </div>
</div>

score 0 · Answer 2 · answered Feb 24 '21 at 21:07

Hey I had the same problem I solved it by changing the place of the Javascript file link in my HTML file I first load the CSS and then Javascript like

<head>
<meta charset="utf-8">
<title>Slideshow</title>
<link rel="stylesheet" href="style.css">
<script src="main.js" defer charset="utf-8"></script>

.clientWidth/.width in JavaScript is not working on img tag

2 Answers2