Buat Function Javascript.
Step pertama, buat fungsi javascript seperti berikut untuk menangani scroll:
Tombol untuk scroll ke kanan:
// main.js
/** rightscrollbutton */
function scrollToNextCard() {
var container = document.getElementById('id-kontainer-horizontal');
container.scrollLeft += window.innerWidth / 2.1;}Tombol untuk scroll ke kiri:
// main.js
/** leftscrollbutton */
function scrollToPrevCard() {
var container = document.getElementById('id-container-horizontal');
container.scrollLeft -= window.innerWidth / 2.1;}Konfigurasi HTML.
Panggil fungsi di atas kedalam tombol yang ada di div elemen horizontal scroll:
<div class="container">
<span class="tombol-kiri" onclick="scrollToPrevCard()"></span>
<span class="tombol-kanan" onclick="scrollToNextCard()"></span>
</div>Buat id horizontal scroll div, lalu integrasikan dengan kode js di atas:
<div class="horizontal-scroll" id="id-kontainer-horizontal">
<div class="card">
<img>
<p>
</div>
</div>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent