e-comerce产品滑块

9nvpjoqh  于 2021-09-13  发布在  Java
关注(0)|答案(0)|浏览(237)
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>

大家好。我正在尝试制作一个产品滑块,就像一个没有框架的电子商务者或netflix的目录,只使用javascrip来训练我的技能。但我有两个问题。
第一:当我点击箭头时,应该会滚动,但它不会。
第二:第一个产品(左)不太在里面。

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题