JavaScript clientWidth hatası

Arkadaşlar şuradaki sorunu tam olarak çözemedim. Yardımcı olursanız sevinirim.
Sorun JavaScript'teki "const size = carouselImages[0].clientWidth;" kodunda Uncaught TypeError: Cannot read properties of undefined (reading 'clientWidth') hatasını veriyor.

[CODE title="HTML"]<div class="carousel-container">
<div class="carousel-slide">
<img class="a" src="pysa.jpg" id="lastClone" alt="">
<img class="a" src="toplantipp.jpg" alt="">
<img class="a" src="yazilim.jpg" alt="">
<img class="a" src="pysa.jpg" alt="">
<img class="a" src="toplantipp.jpg" id="firstClone" alt="">
</div>
</div>
<button id="prevBtn">Prev</button>
<button id="nextBtn">Next</button>
</div>
</div>[/CODE]
[CODE title="CSS"]*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.carousel-container{
width: 100%;
height: 150px;
overflow: hidden;
}
.carousel-slide{
display: flex;
width: 100%;
height: 150px;
}
.carousel-slide img{
width: 100%;
height: 150px;
}[/CODE]
[CODE title="JS"]const carouselSlide = document.querySelector('.carousel-slide');
const carouselImages = document.querySelectorAll('.carousel-slide img');

//Butonlar
const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');

//Counter(Sayaç)
let counter = 1;
const size = carouselImages[0].clientWidth;

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

//buton komutları
nextBtn.addEventListener('click',() => {
carouselSlide.style.transition = "transform 0.4s ease-in-out";
counter++;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});
prevBtn.addEventListener('click',() => {
carouselSlide.style.transition = "transform 0.4s ease-in-out";
counter++;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});[/CODE]

Vanilla Carousel - JSFiddle - Code Playground burdaki fiddle'a göre çalışması lazım.

MCV dedi:

Vanilla Carousel - JSFiddle - Code Playground burdaki fiddle'a göre çalışması lazım.

Genişletmek için tıkla...

Malesef çalışmıyor.

Alakası olmayabilir ama paylaştığınız kodda divler fazladan kapatılmış belki bu sebepten hata veriyordur.

Yeniçocuk dedi:

Alakası olmayabilir ama paylaştığınız kodda divler fazladan kapatılmış belki bu sebepten hata veriyordur.

Genişletmek için tıkla...

Benim hatam diğer kodların divlerini de eklemişim.
Sorun çözülemedi. İnternetten başka bir slider aldım maalesef

Eğer js dosyasını head arasında çağırıyor isen bu hatayı alması normal. Body altında tanımlanan veya yazman gerekiyor.
Eğer body altında tanımlanmış ise js deki kodlarını document.ready içerisinde tanımla. Bu sayede tüm html kodlar yüklenince senin script kodun çalışacaktır. Aklıma ilk bu geldi.
Onun haricinde array elemanı null gelebileceği için ?. ile veriyi okursan daha iyi olur. Şu şekilde coureselImage[0]?.clientWidth

RaSGooL dedi:

Eğer JS dosyasını head arasında çağırıyor isen bu hatayı alması normal. Body altında tanımlanan veya yazman gerekiyor.
Eğer body altında tanımlanmış ise JSdeki kodlarını document. Ready içerisinde tanımla. Bu sayede tüm HTML kodlar yüklenince senin script kodun çalışacaktır. Aklıma ilk bu geldi.
Onun haricinde array elemanı null gelebileceği için? İle veriyi okursan daha iyi olur. Şu şekilde coureselımage[0]?clientwidth

Genişletmek için tıkla...

JS dosyasını head başlığı arasında çağırıyordum ondan kaynaklıydı muhtemelen, yeni bir slider yaptığım için gerek kalmadı zaten teşekkürler yardımın için.

RaSGooL dedi:

Eğer js dosyasını head arasında çağırıyor isen bu hatayı alması normal. Body altında tanımlanan veya yazman gerekiyor.
Eğer body altında tanımlanmış ise js deki kodlarını document.ready içerisinde tanımla. Bu sayede tüm html kodlar yüklenince senin script kodun çalışacaktır. Aklıma ilk bu geldi.
Onun haricinde array elemanı null gelebileceği için ?. ile veriyi okursan daha iyi olur. Şu şekilde coureselImage[0]?.clientWidth

Genişletmek için tıkla...

body altında tanımlamak yanlış bir kullanım şekli. w3.org body ve html kapanış etiketlerinin alt alta ve javascript tanımının da body kapanış etiketinin hemen üstünde olmasını söylüyor.


Örnek olarak bu kodu girersen sana uyarı verecektir:

Şu ise doğru: