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来训练我的技能。但我有两个问题。
第一:当我点击箭头时,应该会滚动,但它不会。
第二:第一个产品(左)不太在里面。
暂无答案!
目前还没有任何答案,快来回答吧!