Dün de aynı konuyu açmıştım ama çözemediğim için tekrardan konu açmaya karar verdim.
Transform:translate methodu ile kaydırılan slider yapmaktayım. Örnek olarak js de iki adet media sorgusu yazdım. Biri 700px den küçük olunca, diğeri büyük olunca. Sayfa yüklenince slider kutu boyutları ayarlanıyor ve butona tıklanınca slider geçişini sorunsuz bir şekilde yapıyor. Fakat diğer media query nin içine girince önceki media query içindeki click event 'i çalışmaya devam ediyor. Haliyle böyle olunca bozulmalar yaşanıyor. Mesela ekran resize olunca hangi media query nin içerisindeyse sadece oradaki click eventinin çalışmasını istiyorum. Bunu nasıl yapabilirim? Ufak bir yol gösterebilirseniz yapabilirim. Herkesin önerisi deneyeceğim.
<script>
document.querySelector('body').onload = function() {
var index = 0;
if (window.innerWidth > 700) {
document.getElementById('slider_container').style.width = (window.innerWidth * 2)
document.querySelector('.slider_next_btn').addEventListener('click', function() {
if (index < document.querySelectorAll('.post_box_slider').length - 4) {
index++;
document.getElementById('slider_container').style.transform = 'translate3d(-' + (index * (window.innerWidth / 4 - 2.5)) + 'px, 0px, 0px)'
}
})
document.querySelector('.slider_prev_btn').addEventListener('click', function() {
if (index > 0) {
index--;
document.getElementById('slider_container').style.transform = 'translate3d(-' + (index * (window.innerWidth / 4 - 2.5)) + 'px, 0px, 0px)'
}
})
}
if (window.innerWidth < 700) {
document.getElementById('slider_container').style.width = (window.innerWidth * 4)
document.querySelector('.slider_next_btn').addEventListener('click', function() {
if (index < document.querySelectorAll('.post_box_slider').length - 2) {
index++;
document.getElementById('slider_container').style.transform = 'translate3d(-' + (index * (window.innerWidth / 2 - 4.5)) + 'px, 0px, 0px)'
}
})
document.querySelector('.slider_prev_btn').addEventListener('click', function() {
if (index > 0) {
index--;
document.getElementById('slider_container').style.transform = 'translate3d(-' + (index * (window.innerWidth / 2 - 4.5)) + 'px, 0px, 0px)'
}
})
}
function resizescreen() {
if (window.innerWidth > 700) {
index = 0;
document.getElementById('slider_container').style.width = (window.innerWidth * 2)
document.getElementById('slider_container').style.transform = 'translate3d(-' + (index * (window.innerWidth / 4 - 2.5)) + 'px, 0px, 0px)'
}
if (window.innerWidth < 700) {
index = 0;
document.getElementById('slider_container').style.width = (window.innerWidth * 4)
document.getElementById('slider_container').style.transform = 'translate3d(-' + (index * (window.innerWidth / 2 - 4.5)) + 'px, 0px, 0px)'
}
}
window.addEventListener('resize', resizescreen);
}
</script> 
