Transform:translate methodu ile kaydırılan slider yapmaktayım. JavaScript ile ekranın genişliğini alıp her bir slider kutucuğunun boyutunu ona göre ayarlıyorum. Her şey tamam lakin bir sorunum var. Diyelim ki ekran genişliği 700px den fazla, ben bunu 700 den aşağı düşürüp tekrar slider kontrol butonlarına tıklayınca slideislem fonksiyonum 2 kere dönüyor. Ve bunun sonucunda bir adet kayacağına iki adet kayıyor ve aynı zamanda bu her seferinde bir artıyor. Ben her koşulda sadece bir kere çalışmasını istiyorum. Bunun nedenini bir türlü anlayamadım. Lütfen bana yardım edin uzun süredir bunun için uğraşmaktayım, en az 4-5 kere silip yazdım neredeyse. Canımı çok sıktı
(Kontrol butonlarına tıkladığımda her seferinde bir kere index değeri slideislem 'e girip bir tane kaydırıyor lakin dediğim gibi diğer media query sorgusunun içi çalışırsa eğer index değeri iki kere slideislem 'e giriyor. mesela index = -1 dönünce bir kere kaydırmış oluyorum. Ama bu hem -1 hem -2 oluyor bir anda iki kere dönüyor. Ve bu her seferinde diğer query nin içine girince artıyor. Bunu ben yakalayamadım belki siz yakalarsınız)
<script>
var index = 0;
document.querySelector('body').onload = function() {
var win = window,
relatedposts = document.querySelectorAll('.post_box_slider'),
slider_container = document.getElementById('slider_container'),
x = win.innerWidth
// myfunction lara gönderilen x ekran genişliği değerini tutuyor
// eger 700 px den küçükse slider kısmı 2 kutucuk görünecek
function myFunction(z, x) {
if (z.matches) {
index = 0;
for (var a = 0; a < relatedposts.length; a++) {
relatedposts[a].style.width = (x / 2) + 'px';
}
// slider kutucuklarının hepsinin toplam genişliği
slider_container.style.width = (((x / 2) + 1) * <?= $tema_ayarlari[0]['relatedpostscount'] ?>) + 'px';
var newrelatedposts = document.querySelectorAll('.post_box_slider').length
document.querySelector('.slider_next_btn').addEventListener('click', function() {
if (index > -(newrelatedposts - 2))
index--
slideislem(2, index)
})
document.querySelector('.slider_prev_btn').addEventListener('click', function() {
if (index < 0) {
index++
slideislem(2, index)
}
})
}
}
// eger 700 px den büyükse slider kısmı 4 kutucuk görünecek
function myFunction2(y, x) {
if (y.matches) {
index = 0;
for (var a = 0; a < relatedposts.length; a++) {
relatedposts[a].style.width = (x / 4) + 'px';
}
// slider kutucuklarının hepsinin toplam genişliği
slider_container.style.width = (((x / 4) + 1) * <?= $tema_ayarlari[0]['relatedpostscount'] ?>) + 'px';
var newrelatedposts = document.querySelectorAll('.post_box_slider').length
document.querySelector('.slider_next_btn').addEventListener('click', function() {
if (index > -(newrelatedposts - 4))
index--
slideislem(4, index)
})
document.querySelector('.slider_prev_btn').addEventListener('click', function() {
if (index < 0) {
index++
slideislem(4, index)
}
})
}
}
// 700 px altı ve üstü için çalışacak media query fonksiyonları
var z = window.matchMedia("(max-width: 700px)")
myFunction(z, x) // Call listener function at run time
z.addListener(myFunction) // Attach listener function on state changes
var y = window.matchMedia("(min-width: 700px)")
myFunction2(y, x) // Call listener function at run time
y.addListener(myFunction2) // Attach listener function on state changes
// ekran genişliği oynatılırsa tetikleniyor
function checkMediaQuery() {
var win = window,
relatedposts = document.querySelectorAll('.post_box_slider')
x = win.innerWidth
if (window.innerWidth > 700) {
index = 0
for (var a = 0; a < relatedposts.length; a++) {
relatedposts[a].style.width = (x / 4) + 'px';
}
// slider kutucuklarının hepsinin toplam genişliği
slider_container.style.width = (((x / 4) + 1) * <?= $tema_ayarlari[0]['relatedpostscount'] ?>) + 'px';
slideislem(4, index)
} else if (window.innerWidth < 700) {
index = 0
for (var a = 0; a < relatedposts.length; a++) {
relatedposts[a].style.width = (x / 2) + 'px';
}
// slider kutucuklarının hepsinin toplam genişliği
slider_container.style.width = (((x / 2) + 1) * <?= $tema_ayarlari[0]['relatedpostscount'] ?>) + 'px';
slideislem(2, index)
}
}
window.addEventListener("resize", checkMediaQuery);
// slider kısmının kaydırılmasını tetikliyor
function slideislem(b, index) {
console.log(index)
document.getElementById('slider_container').style.transform = 'translate3d(' + (index * (x / b + 1)) + 'px, 0px, 0px)'
}
}
</script> 