CODEWITHSUNDEEP
javascripthtmlcss
Saif Ali
Saif Ali

Reputation: 23

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

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>

Upvotes: 2

Views: 389

Answers (2)

Elyasomer
Elyasomer

Reputation: 113

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>

Upvotes: 0

Skylar
Skylar

Reputation: 926

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>

Upvotes: 2

Related Questions