Cara Membuat Horizontal Slider di html (dengan bootstrap / tanpa bootstrap)

Halo guys, bagaimana kabarnya? semoga baik baik saja ya. untuk kesempatan kali ini saya akan berbagi tentang Cara Membuat Horizontal Slider di html (dengan bootstrap / tanpa bootstrap) oke langsung saja

 

Persiapan

1. Buat semua div dengan inline element berikut
   display: inline-block; 
2. Tambahkan property berikut didalam element div
   overflow-x: auto;
3. Gunakan single line di semua div dengan element berikut
   white-space: nowrap; 
4. Jangan lupa untuk import bootstrap css ke project anda
   
   <link rel="stylesheet" href=
   "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Sehingga hasilnya akan menjadi seperti berikut ini

 

See the Pen Horizontal slider with bootstrap by Syahdan Filsafan (@syahdan-filsafan) on CodePen.

jika anda tidak ingin menggunakan bootstrap karna alasan tertentu anda juga dapat menggunakan coding di bawah ini

See the Pen Horizontal Slider by Chirag (@chiragtutlani) on CodePen.

Setelah itu anda dapat mengedit nya dengan sedikit coding agar terliaht lebih menarik sehingga menjadi seperti berikut ini

See the Pen Flexible Horizontal Scrolling Containers #2 by Dannie Vinther (@dannievinther) on CodePen.

bagaimana?? cukup mudah bukan??? oke, sekian tutorial pada kali ini apabila ada salah kata saya mohon maaf dan terimakasih sudah berkunjung ke situs saya 

Berikut adalah beberapa refrensi dari implementasi horizontal slider dari codepen

Clone Spotify

See the Pen Horizontal Scroll Containers Mobile & Desktop - Spotify Style by Kilian So (@kilianso) on CodePen.

CSS Horizonal Scrolling

See the Pen CSS Horizontal Scrolling by lemmin (@lemmin) on CodePen.

Instagram Story Style

See the Pen Overflow scroll example by Monica Wheeler (@frogmcw) on CodePen.

Horizontal scroll with next element shown

See the Pen Horizontal scroll with next element shown by Vinayak Bagaria (@techentertainer) on CodePen.

Horizontal Scrolling with Vanilla JavaScript

See the Pen Horizontal Scrolling with Vanilla JavaScript by Syahrizal Dev (@syahrizaldev) on CodePen.

Smooth Horizontal Scrolling

See the Pen Smooth Horizontal Scrolling by Colin Lord (@colinlord) on CodePen.

Horizontal Scrolling Website with path draw (ini yg paling keren menurut saya)

See the Pen Horizontal Scrolling Website by lexa (@lexa2guy) on CodePen.

Share Share Tweet Share Share Share

KLIK

DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi Anda membantu Admin untuk lebih giat lagi dalam membagikan template blog yang berkualitas. Terima kasih.