Merhabalar,
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>