电子商务产品滑块

Question

let thumbnail = document.getElementByClassName("thumbnail");
let slider = document.getElementById("slider");
let button_left = document.getElementById("slide-left");
let button_right = document.getElementById("slide-right");

button_left.addEventListener( "click" , () => {
    alert("Hola");
    slider.scrollLeft -= 125;
} );

button_right.addEventListener("click", () => {
    slider.scrollLeft += 125;
});

<div class="slide-container">

                <img src="left.png" alt="left" id="slide-left" class="arrow">
                
                <section class="container" id="slider">

                    <div class="thumbnail">
                        <img src="product.png" alt="" srcset="">

                        <h3>Product n</h3>

                    </div>

                    <div class="thumbnail">
                        <img src="product.png" alt="" srcset="">

                        <h3>Product n</h3>

                    </div>
                    
                    <div class="thumbnail">
                        <img src="product.png" alt="" srcset="">

                        <h3>Product n</h3>

                    </div>
                    
                    <div class="thumbnail">
                        <img src="product.png" alt="" srcset="">

                        <h3>Product n</h3>

                    </div>

                    <div class="thumbnail">
                        <img src="product.png" alt="" srcset="">

                        <h3>Product n</h3>

                    </div>

                    <div class="thumbnail">
                        <img src="product.png" alt="" srcset="">

                        <h3>Product n</h3>

                    </div>

                    <div class="thumbnail">
                        <img src="product.png" alt="" srcset="">

                        <h3>Product n</h3>

                    </div>

                </section>
                
                <img src="right.png" alt="right" id="slide-right" class="arrow">

            </div>

        </main>

大家好。我正在尝试制作一个没有框架的产品滑块，例如 E-comers 或 netflix 的目录，仅使用 javascrip 来训练我的技能。但是我有两个问题。

首先：当我点击箭头时，它应该会滚动，但它不会。

第二个：第一个产品（左）它不太在里面。