Membuat Generic Slider dengan ReactJS

Seperti dalam tulisan saya sebelumnya, banyak keuntungan membuat komponen generik. Kali ini saya akan mencoba membuat image slider seperti airbnb.

Komponen slider yang harus ada:

• List/map

Komponen Card

Komponen Slider

Catatan penting

• Untuk safari, slider nya tidak begitu mulus, harus ada tambahan di css nya

.card-slider .cs-parent-wrapper {
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch !important;
}
.card-slider .cs-parent-wrapper::-webkit-scrollbar {
  -webkit-appearance: none !important;
  display: none !important;
}
.card-slider .cs-wrapper::-webkit-scrollbar {
  -webkit-appearance: none !important;
  display: none !important;
}

Test

1. Clone from here
2. npm install
3. npm start

Result