Membuat Web Slider dengan Slick

Illustrasi Slick slider

Slider merupakan elemen UI yang populer di web dan banyak variasinya. Mulai dari slideshow banner, carousel, image gallery, dan lain-lain. Tutorial kali ini akan membahas sekilas tentang slider, lalu dilanjutkan dengan berkenalan dengan Slick slider, yang merupakan library JS populer untuk membuat berbagai macam jenis slider. Mengapa pake Slick? Apa kelebihannya? Bagaimana cara pemakaiannya? Semua akan dibahas disini beserta code dan file latihan.

Slider dan berbagai macamnya

Slider adalah elemen UI yang sangat lazim dijumpai di web. Berikut ini beberapa contoh jenis slider di situs e-commerce Indonesia:

Slide show banner

Mungkin jenis slider ini paling sering dijumpai ya. Seperti billboard iklan yang berjalan.

Contoh banner promosi jd.id
Banner promosi pada homepage JD.id. Perhatikan bulatan-bulatan (dots) di kiri bawah sebagai navigasi.

Carousel

Pada carousel, beberapa item ditampilkan sekaligus. Namun bisa sliding/bergeser ke kanan dan kiri, untuk ditampilkan lebih banyak lagi.

Contoh carousel promosi blibli.com
Barang-barang flash sale pada homepage Blibli ditampilkan dalam bentuk carousel. Terdapat panah ke kiri dan kanan untuk sliding.

Slide+carousel

Contoh slider detail produk tokopedia
Pada halaman detail produk Tokopedia, foto barang hanya ditampilkan 1 dalam satu waktu dalam bentuk slide, dengan navigasi carousel di bawahnya.

Dan masih banyak lagi contoh lainnya.

Secara UI, dari sini kebayang kan fungsi slider, yaitu dipakai jika: ingin menampilkan banyak hal di tempat yang terbatas dan ga bikin kewalahan. Dan membuat user hanya cukup fokus ke satu atau sedikit konten dalam satu waktu.

Kita akan membuat berbagai slider seperti yang kita bahas tadi dengan menggunakan Slick. Artikel ini dimulai dari yang sederhana, dan ke depannya akan disambung dengan artikel lain untuk implementasi yang lebih kompleks.

Tentang Slick

Ada banyak script dan plugin slider di luar sana. Namun Slick slider adalah slider favoritku. Situs resminya ada di https://kenwheeler.github.io/slick/

Alasan saya suka Slick ini karena slider ini simple, gampang dipakai, gampang dicustom dan fiturnya cukup, nggak kebanyakan fitur yang potensial bikin kompleks dan bloated. Memang bukan yang termodern, bukan yang terlengkap, tapi handal.

Efek transisi bawaannya pun sepertinya cuma dua, yaitu sliding dan fade. Nggak ada visual efek macam-macam. Karena pada dasarnya dua efek tersebut yang paling sering saya pakai, dan memang jarang sekali situs-situs menerapkan efek yang gimana-gimana untuk sliding. Fade in/out sudah cukup berkelas untuk banner, dan efek sliding untuk carousel, mentok-mentok main di timing easing-nya.

Slick ini kalau di webnya punya semboyan “The last carousel you will ever need“. Untuk saya, kalau dipikir-pikir hampir bener juga 😅

Script ini melakukan satu hal: yaitu slider. Baik slider banyak item, maupun tunggal. Apapun bentuk dan variasinya, mulai carousel, logo berjalan, pricing table keren yang bisa dislide, dan lain-lain. Jadi buat saya, Slick jadi bahan baku berbagai UI yang sering kepakai. Karena itu, saya jadi ingin bikin artikel tentang ini.

Yang dibahas disini adalah Slick slider yang original, yaitu yang berbasis jQuery, yang dibuat oleh Ken Wheeler. Soalnya karena popularitasnya, ada juga berbagai fork-nya di framework lain seperti Angular, React, Vue, dll. Ini semua diluar scope artikel ini.

Library ini juga open source (MIT license) dan populer. Tergolong jadul, namun mature dan battle tested. Dipakai di situs-situs high profile juga. Cuma pengembangannya udah nggak aktif lagi, mungkin karena jQuery juga mulai memudar.

Hari gini masi pake jQuery?

Tenang aja, jQuery is fine. Ini tergantung kebutuhan anda, mau membuat web seperti apa. Untuk kebutuhan web umum, misal corporate site, blog under CMS kayak WordPress, dll. JQuery is fine. Its proven, battle tested, dan terbukti memudahkan. Apalagi karena banyak plugin jQuery yang bagus-bagus, seperti Slick slider ini.

Jika anda bikin web app pake framework tertentu kayak Angular, React, dll tentu anda butuh solusi lain.

Oke kembali ke Slick slider.

Fitur-fitur Slick slider.

  • Responsive. Jadi bisa menyesuaikan ukuran layar,
  • Slick bisa beda-beda konfigurasi di breakpoint yang berbeda. Jadi kita bisa kasih style yang berbeda di berbagai ukuran device. Misalnya di ukuran desktop menampilkan 3 slide per layar dengan next & prev button, lalu di smartphone nampilin 1 slide dengan dot navigation.
  • Support navigasi yang aksesible. Misalnya untuk mobile bisa gesture swipe untuk geser slide (prev dan next), di desktop bisa juga geser mouse dan pakai tombol keyboard, serta paging.
  • Bisa loop tak terbatas, auto play, dll.
  • API yang cukup lengkap dan terdokumentasi bagus. Terdapat setting dan JS events sehingga kita bisa kustomisasi dan extend sesuai kebutuhan.

Pesaing Slick slider

Tentu Slick slider bukan satu-satunya slider library. Ada banyak, dari yang sederhana hingga yang fiturnya jauh lebih kompleks. Dari pure JS hingga under framework tertentu Angular, React, Vue, atau bagian dari library besar kayak Kendo UI atau Jquery UI.

Membuat Slider pertamaku

Artikel part ini akan membahas dasar pemakaian slick. Sebenarnya di situsnya sudah terdokumentasi dengan jelas dan bagus, jadi anda tinggal ngikutin aja. Namun sekiranya anda bingung, saya akan bahas dalam bentuk step by step aja untuk setup dasar. Di artikel selanjutnya nanti kita coba bikin berbagai bentuk slider. BTW, file latihan bisa didownload di bagian bawah artikel ini.

Oke langsung aja, kita siapin file html, misal index.html

Library slick

Slick ini terdiri dari JS dan CSS yang harus kita referensikan ke dokumen html kita. Untuk latihan, cara paling praktis adalah langsung me-refer script dan CSS-nya dari server CDN aja, terutama kalau anda terkoneksi internet, jadi nggak perlu download librarynya dulu.

CDN, atau content delivery network mendistribusikan suatu file di banyak titik lokasi server, bukan hanya di 1 lokasi terpusat aja.
Jadi, secara teori, dapat mempercepat akses karena file bisa diperoleh dari server yang terdekat dari lokasi anda.

CSS

Slick.css – File ini adalah styling yang dibutuhkan Slick. Seperti biasa CSS ditaruh di <head> section dari html.

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

CSS diatas sudah cukup untuk menjalankan Slick agar berfungsi, namun tampilannya sangat plain dan unstyled. Jika anda ingin styling minimal dan default, ada file CSS optional bernama slick-theme.css

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>

JavaScript

Supaya simple, kita ambil slick.js dari CDN aja ya. Ini scriptnya. Tersedia versi minified/terkompresi (.min.js) dan yang nggak minified (.js).

Sesuai namanya, yang terkompresi lebih kecil ukurannya.  Kalau anda ingin mempelajari kodingannya, bisa pake yang nggak terkompresi.

JS bisa diload di head atau di bawah, sebelum tag penutup /body. Kita taruh bawah aja.

jQuery sebagai Dependensi

Slick adalah jQuery plugin, karena itu butuh jQuery yang harus kita tambahkan juga. Bisa download dari jQuery atau pake CDN yang udah siap pakai.

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js

Jangan lupa urutan dipanggilnya sebelum Slick ya.

CSS dan JavaScript kita

Kita siapin CSS kita, misalnya kita buat style.css di folder yang sama dengan index.html. Lalu kita panggil di index.html.

<link rel="stylesheet" type="text/css" href="style.css"/>

Untuk isi CSS nya, kita buat sederhana aja kayak gini, sekedar supaya nggak terlalu basic, dan nggak terlalu lebar halamannya.

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    max-width: 640px;
    margin: 0 auto;
    background: #999;
}

Kita siapin juga JavaScript kita, dengan nama script.js. Misal lokasinya sama dengan index.html.

Sementara filenya kita biarkan kosong dulu. Jadi dokumen html kita kira-kira seperti ini.

Mari kita mulai pakai Slick

Mudah sekali, cukup siapkan elemen induk, kasih atribut class atau id untuk pengenal, lalu didalamnya anda bisa tambahkan beberapa anaknya. Markupnya kira-kira seperti ini.

Disini saya punya div dengan kelas slider, yang nantinya akan disulap jadi slider. Anak-anaknya, yaitu div di bawahnya, akan jadi slidenya. Sederhana bukan?

Oke mari kita terapkan.

Di script.js, kita akan menginstansiasi slider kita. Kita udah siapin markupnya ya tadi, yaitu div dengan atribut kelas ‘.slider‘. Seperti halnya jQuery plugin pada umumnya, kita tinggal panggil di jQuery selector.

$([selector]).slick([object settings])

Untuk object setting dipake untuk mengkonfigurasi. Misal kalau ingin slidenya autoplay, alias jalan otomatis tiap selang waktu tertentu, misal 3 detik, settingnya seperti ini.

{
  autoplay: true,
  autoplaySpeed: 3000,
}

Jadi lengkapnya seperti ini, kita apply ke div .slider kita.

$(document).ready(function(){
    $('.slider').slick({
      autoplay: true,
      autoplaySpeed: 2500,
    });
  });

Coba cek, sekarang div-div didalam .slider akan muncul bergiliran, lengkap dengan tombol prev dan next.

Mudah kan?

Yup slide kita cukup basic. Perlu diingat ini adalah pondasi dasar aja. Cukup menunjukkan kemudahan si Slick slider ini. Karena salah satu kelebihan Slick adalah kesederhanaan dan kemudahan dikustomisasi nya.

Melihat struktur DOM slick slider

Kalo dicek di Chrome dev tools atau Firefox dev tools (tekan F12 di browser anda), kita bisa mengintip html yang digenerate oleh Slick ini.

html><html (body > rst Slick Slider</hl) <div slick-initialized slick-slider' (button prev slick-arrow" <div <div transform: translate3d(-384apx, apx, øpx) ; " : :before <div slick-cloned" id aria -hidden:" true" tabindex=" your content 6</div) width . • 832epx; -s ick-index=" I S7Epx; " > <div aria-hidden= "true" tabindex=" -I" S78px; 'your content I <div aria-hidden= "true" tabindex=" -I" 578px; ">your content 2 <div aria-hidden= "true" tabindex=" -I" S78px; 'your content 3

Perhatikan div slider kita yang sederhana, sekarang dipermak ama Slick jadi struktur markup yang lebih kompleks (1). div class="slider" berubah jadi div class="slider slick-initialized slick-slider". Lalu anak-anaknya sekarang berada jauh lebih dalam dengan struktur yang kompleks (2).

Jika anda tertarik dan penasaran dengan ini (jika engga, cukup abaikan aja :-)), kira-kira seperti ini struktur dasarnya, setelah disederhanakan.

Keterangan komentar angka:

  1. Kontainer slider kita.
  2. Tombol previous.
  3. Kontainer drag.
  4. Kontainer slider.
  5. Slide-slide kita (perhatikan Slick menggandakan beberapa slide untuk keperluan transisi sliding dan pembagian halaman).

Yang tadinya markup awal kita cuma no 1 dan anaknya no 5, sekarang ‘disulap’ jadi banyak. Namun struktur Slick ini cukup konsisten dan kelas-kelasnya jelas, sehingga dengan mudah kita bisa styling sebebas-bebasnya.

Oke supaya nggak terlihat membosankan, mari kita tambahkan sedikit styling di bagian slidenya, yaitu yang memiliki kelas slick-slide.

.slider .slick-slide {
    background: #f5f5f5;
    border: solid 1px #dedede;
    padding: 30px;
}
My First Slick Slider your content 3

Di artikel Slick selanjutnya, kita akan membahas penerapan Slick slider di case study tertentu. Mulai dari membuat responsive slide show banner. Check it out.

Demo Hasil

Silakan lihat di sini

File Latihan

Download di sini

Daftar Referensi:

Dokumentasi Slick Slider https://kenwheeler.github.io/slick/