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]
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]