Tutorial Slick Slider part 3: Thumbnail Slider

Oke. Kali ini kita lanjutkan seri tutorial Slick Slider. Pada part 3, kita akan mencoba variasi slider jenis lain, yaitu thumbnail slider. Pada dasarnya slider ini memadukan 2 jenis slider yang saling terhubung. Slider 1 untuk gambar utama, dan Slider 2 untuk thumbnails / daftar gambar kecil.

Jenis slider semacam ini sering kita jumpai pada halaman website e-commerce. Entah JD.ID, Blibli, Tokopedia, dll, di bagian detail produk.

Pada website e-commerce, biasa dipakai untuk photo gallery. Ketika menampilkan foto deskripsi produk.

Contoh thumbnail slider pada situs JD.id

Karena fotonya ada banyak, maka butuh slider dan navigasi.

Jika pengunjung ingin melihat foto ukuran lebih besar lagi, biasanya mengeklik slider utama. Nanti akan muncul popup/lightbox yang berisi gambar berukuran besar.

Pattern seperti ini dirasa efektif, simple dan hemat space. Selain itu pengunjung juga sudah terbiasa dengan UI seperti ini. Intinya proven lah.

Disini kita akan coba bikin yang seperti itu. Oh ya, Slider ini juga harus responsive, alias bisa dilihat di berbagai layar. Layout-nya menyesuaikan.

Bahan-bahan dasarnya masih sama dengan tutorial sebelumnya, yaitu HTML, CSS, JS, dan slider kesayangan kita, Slick Slider.

Yang Mau Dibuat

Kita akan coba bikin halaman detail produk dummy (bo’ong-bo’ongan aja) yang sederhana. Ceritanya halaman detail produk tentang mainan kayu dinosaurus. Hasil akhirnya nanti seperti ini.

Hasil akhir thumbnail slider — Hasil akhir dilihat di desktop dan mobile

Demo disini

Foto-foto dari pexels (free). Untuk sumber asli, cek link di paling bawah artikel ini. Demo dan file latihan juga tersedia per step, bisa di-download di akhir artikel.

Note: Jika anda masih awam dengan Slick Slider, anda bisa mulai dari tutorial part 1.

Prerequisite / Prasyarat

Tentunya diperlukan pengetahuan dasar web kayak HTML, CSS, dan JS.

Nggak apa-apa kalau anda cuma menguasai sedikit. Karena tutorial dalam bentuk walk through step-by-step yang sekalian memperkuat pondasi HTML & CSS anda.

Software yang dibutuhkan

Teks editor. Apa saja, misal Notepad++, Visual Studio Code, atau Sublime Text. Saya menyarankan Visual Studio Code, karena kita bisa menjalankan web server dengan mudah (nanti dibahas di akhir artikel).
Browser. Apa aja favorit anda. Chrome atau Firefox.

Kerangka dasar

Step awal yaitu kita buat kerangka dasarnya. Ketika mendesain web page atau UI biasa dimulai dari sketsa atau biasa disebut wireframe.

Kira-kira layout halaman sederhana kita nanti seperti ini jika di layar desktop:

Disini layoutnya ada 2 kolom, slider sebelah kiri, dan deskripsi produk sebelah kanan. Selain itu ada header juga.

Jangan lupa mobile!

Ingat, hari gini website harus bisa diakses di berbagai ukuran layar. Di layar smartphone maupun di layar desktop harus sama-sama mudah dilihat.

Untuk itu, maka kita harus menerapkan responsive web design (RWD). Yaitu istilah umum pada desain web, di mana webpage harus tampil bagus di berbagai ukuran layar. Jadi desainnya bisa menyesuaikan dengan ukuran layar.

Tampilan di layar mobile, kita rencanakan seperti ini. Pada dasarnya hanya mengubah jadi 1 tumpukan.

Sekilas Cara Kerja Responsive Web Design

Kuncinya ada di CSS, ada fitur yang namanya media query. Di mana kita bisa mendefinisikan styling yang diterapkan di kondisi tertentu saja, dalam hal ini kondisinya adalah ukuran window.

Bagi yang belum tahu dengan media query, kira-kira begini sederhananya:

.header {
	Font-size: 20px;
}

@media only screen and (min-width: 768px) {
	.header {
		Font-size: 50px;
	}
}

Perhatikan, awalnya header berukuran 20px, ketika dili hat pake smartphone ukurannya 20px.

Namun kemudian jika ukuran layarnya 768px ke atas, maka kita mendefinisikan .header lagi berukuran 50px;

Yang otomatis akan menimpa deklarasi header sebelumnya.

Ingat, CSS bersifat cascading. Disini header yang 50px yang menang, karena ditulis belakangan, menimpa nilai awal yang 20px.

Teknik seperti ditas biasa disebut mobile first responsive web design.

Jadi stlying dasar atau kondisi awal kita fokus ke mobile dulu.

Lalu belakangan kita tambahkan media query di ukuran layar yang lebih besar beserta stylingnya, untuk mengoverride desain supaya tampil bagus di layar lebih besar.

Oke itu tadi dasar2nya bagi yang belum tau media queries, mari lanjut ke webpage kita.

Lets Code

Htmlnya seperti ini, seperti biasa, agar sederhana, untuk keperluan tutorial ini kita taruh semua html, css dan JS dalam 1 file aja. Penjelasan kode akan menyusul di bawah.

Demo: index1.html

Hasilnya kita akan mendapat tampilan sederhana seperti ini.

Kerangka dasar pada mobile — Di layar yang lebih kecil

Penjelasan Kode

Kok awal2 dah mayan banyak cssnya? Tenang sebagian besar cuman styling biasa, ukuran font, border dll, sederhana.

Mending Mari kita fokus ke bagian utama, yaitu layoutnya

Div product, adalah wrapper atau elemen induk

Lalu ada 2 anak, div product-images yang bakal berisi slider

Dan product-description, berisi teks2 deskripsi produk

Untuk layoutnya kita pake flex

.product {
  display: flex;
  flex-direction: column;
}

Ini akan membuat 2 div anak menjadi bertumpuk, Seperti ini

Lah Kenapa pake flex? Bukankah tanpa flex juga mereka bertumpuk?

Well karena nanti di ukuran desktop kita ingin membuat 2 anak itu berjajar kiri kanan.

Dengan flex, mengubah sumbu sangat mudah, tinggal ganti nilai flex-direction

@media only screen and (min-width: 768px) {
  .product {
    flex-direction: row;
  }
  . . .
}

Praktis.

Sisa css yang lain adalah styling dasar sekedar supaya tampak sedikit lebih cakep.

Perhatikan kita juga menambhakan library jquery dan slick.

Di artikel part 2 hal ini dibahas lebih jelas.

Tips: Gimana cara mensimulasikan ukuran layar smartphone?

Cara paling sederhana tentu saja dengan meresize ukuran window browser anda.

Namun saat ini browser juga dilengkap devtools lengkap, salah satu fitur andalannya adalah simulasi layar mobile,

Jika anda pake Chrome, tekan F12 untuk memunculkan dev tools

Cari icon ini “toggle device toolbar” (1)

Nanti anda bisa memilih perangkat yang ingin disimulasikan (2), misalnya iPhone 6. Maka ukuran layar dan beberapa behaviour browser akan menyesuaikan.

Mari buat slider

Untuk HTML. Di bagian div dengan kelas product-images, kita ganti isinya dengan markup slider, mirip di artikel part 2

CSSnya juga mirip2 lah dengan part 2

Namun kita tambahkan border dan shadow, memberi kesan seakan2 gambarnya adalah lembaran foto

/* Main Slider */
.slider {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    border: solid 9px #fff;
    box-sizing: border-box;
    margin-bottom: 15px;
    border-radius: 5px;
}

.slider .slick-slide {}

.slider .slick-slide img {
    width: 100%;
}

/* make button larger and change their positions */
.slick-prev,
.slick-next {
    width: 50px;
    height: 50px;
    z-index: 1;
}

.slick-prev {
    left: 5px;
}

.slick-next {
    right: 5px;
}

.slick-prev:before,
.slick-next:before {
    font-size: 40px;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* General slick slider styling */
.slick-slide:focus,
.slick-slide:focus {
    outline: none;
    /* remove default outline when on :focus */
}

/* hide dots and arrow buttons when slider is not hovered */
.slick-slider:not(:hover) .slick-arrow,
.slick-slider:not(:hover) .slick-dots {
    opacity: 0;
}

/* transition effects for opacity */
.slick-arrow {
    transition: opacity 0.5s ease-out;
}

Kita juga perlu membatasi ukuran kolom .product-images di layar desktop. Supaya slick slider bisa mengkalkulasi lebarnya dengan bagus. Misal kita set 50%

@media only screen and (min-width: 768px) {
    . . . .
    product-images {
        width: 50%;
    }
    . . .
}

Scriptnya, seperti biasa, kita menyulap .slider menjadi slick

$(document).ready(function () {
    $('.slider').slick({
        infinite: false
    });
});

Konfigurasi infinite: false agar slider kita mentok di kanan & kiri. Alias ga berulang. jika udh geser terus hingga paling kanan, maka gabisa di next lagi.

Maksudnya Supaya pengunjung memiliki gambaran tentang jumlah slide yang ada.

Demo: index2.html

Di mobile

Sip, di mobile masi jalan bagus

Bikin thumbnail slider

Disini triknya adalah dengan menambahkan 1 slider lagi, lalu menghubungkannya dengan slider 1

Pada dokumentasinya slick, kita bisa lakukan ini dengan fitur slider syncing https://kenwheeler.github.io/slick/

Mari kita tambahkan slider ke 2

Untuk markup, kita taruh dibawah slider ke 1:

Ceritanya ini adalah slider yang persis dengan slider pertama, namun dengan foto-foto thumbnail versi kecil. Pastikan urutan foto nya sama dengan slider 1 ya.

Styling, seperti gambar utama, kita tambahkan gaya bingkai juga.

/* Thumbnails Slider */
.slider-thumbnails {
    margin-left: -15px;
    margin-right: -15px;
}

.slider-thumbnails .slick-slide {
    padding: 15px;
    transition: transform 0.3s ease-out;
}

.slider-thumbnails .slick-slide:focus img {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}

.slider-thumbnails .slick-slide img {
    max-width: 100%;
    border: solid 5px #fff;
    box-sizing: border-box;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.3s ease-out;
    border-radius: 3px;
}

Nah sekarang bagian kuncinya, di Javascript.

Kita sulap .slider-thumbnails menjadi slick slider, namun dengan konfigurasi berbeda, yaitu tampil 3 slide sekaligus

 $('.slider-thumbnails').slick({
    infinite: false,
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.slider',
    focusOnSelect: true
});            

$('.slider').slick({
    infinite: false,
    asNavFor: '.slider-thumbnails',
});

Untuk menghubungkan/sync antara kedua slider

Perhatikan sekarang kedua slider ada properti asNavFor, yang masing2 menunjuk ke satu sama lain.

.slider-thumbnail menunjuk ke .slider, demikian pula sebaliknya

Jalankan di browser, Jadi deh

Demo: index3.html

Mudah ya ternyata.

Ga puas, sebagai bonus mari kita tambahkan improvement, yaitu lazy loading dan lightbox.

Bonus 1: Menambahkan lazy-loading

Apakah lazy loading itu? Loading malas? Kalo diterjemahkan apa adanya seperti itu, lazy loading adalah teknik untuk menunda memuat sesuatu hingga bener2 dibutuhkan.

Contohnya seperti slider kita, terutama di slider 1 alias slider yang utama, dimana hanya 1 gambar yang terlihat dalam 1 waktu. Karena ada 6 gambar, maka browser pengunjung akan meload semuanya.

Hal ini potensial mubazir ya terutama Jika pengunjung ga melihat semua gambarnya, misal cuma geser sampe slide foto 1 dan 2. Padahal browser udh mendownload semuanya, telanjur makan network bandwidth dan pemrosesan di browser, tentu saja ngefek ke kecepatan loading page juga. Karena itu lazy loading adalah best practice yang disarankan oleh web developer.

Pada kasus slider ini, kita cuma perlu meload gambar pertama aja, gambar slider berikutnya hanya akan diload ketika slide itu aktif.

Di Slick, hal ini sangat mudah!

Mensimulasikan Network lambat

Pertama-tama kalo berurusan dengan loading web page, kalo anda develop di lokal, pasti ga bakal ngalamin delay, jelas aja karena filenya diload dari harddisk dalam sekejab. Untuk itu kita harus mensimulasikan kondisi network lemot.

Untungnya di chrome ada fitur untuk itu,

Buka devtools anda dengan tekan F12

Pilih tab network (1)

Lalu di dropdown throttling, ganti nilainya dengan “Slow 3G”, dan reload page.

Fitur ini berguna bagi web developer untuk mensimulasikan apa yang terjadi jika pengunjung memiliki profil koneksi tertentu, sehingga kita bisa mengoptimasi web kita.

Ups, tapi fitur ini ga jalan di lokal file.

Jika anda menjalankan webpage ini dengan langsung membuka file htmlnya di browser (seperti yang saya lakukan di contoh ini), maka maka fitur chrome ini ga jalan.

Kita harus menjalankan file html kita dari webserver

Entah dengan cara mengupload file html kita ke suatu hosting, atau memakai webserver di pc lokal kita.

Intinya, page ini musti diakses dengan protokol http://

Sedikit ribet?

Ya, tapi memang seperti itulah praktek membuat web yang benar. Di contoh2 kita sebelumnya cukup simple untuk dijalankan langsung dengan drag & drop file html ke browser, namun cara ini sangat terbatas dan banyak hal yang ga jalan. Misalnya kalo mau request data dari server.

Browser mengenal konsep domain dan aturan sekuriti yang berkaitan dengan akses apa dan kemana.

Jadi intinya butuh web server. Gpp, ada banyak cara kok. Menurut saya cara termudah adalah pake VS Code dan plugn live server. Simak artikel di link berikut.

Jika anda pake VSCode Stepnya:

Buka folder kerja anda di VSCode
Jalankan Live server, klik go live di pojok kanan bawah
Browser akan terbuka dan dengan alamat lokal server anda, misal http://127.0.0.1:5500/index3.html

Dengan asumsi anda sudah mengaktifkan dev tools dan network throttling ke slow 3G, Maka anda akan mengalami delay yang lumayan, tergantung ukuran gambar2 yang diload.

Lazy loading di Slick

DI bagian JS, kita cukup tambahkan config lazyLoad: 'ondemand'

Sehingga

$('.slider').slick({
    infinite: false,
    lazyLoad: 'ondemand',
    asNavFor: '.slider-thumbnails',
});

Lalu di bagian HTML, ganti atribut src di img dengan data-lazy

Tadinya

jadi

Jalankan!

Jangan lupa simulasikan koneksi pake yang lemot di chrome, misal Slow 3G, supaya ketauan bedanya.

Kali ini semua image tidak akan didownload sekaligus. Hanya yang sedang diliat aja. Baru ketika kita berpidah image, slide ke kanan atau ke kiri, slick akan mendownload image berikutnya.

Pengunjung hanya mendownload yang dibutuhkan aja.

Menambahkan Animasi Loading

Namun Kelemahannya, image berikutnya Jadi tidak muncul dalam sekejab karena proses loading. Untuk mengakalinya kita bisa menambahkan animasi loading.

Cara paling sederhana, Yaitu kita menambahkan gambar backgroiund animasi loader di tiap-tiap kotak image. Jadi loading akan keliatan ketika kotak masi kosong. Dan akan ketutupan image ketika image udah kedownload.

Untuk gambar loader, kali ini kita pake yang gratisan bikinan Sam Herbert

https://github.com/SamHerbert/SVG-Loaders

Ada banyak pilihan, disini saya pake yang tail spin https://github.com/SamHerbert/SVG-Loaders/blob/master/svg-loaders/tail-spin.svg

Lalu saya ganti warnanya jadi hitam. Download di sini.

Lalu CSS nya Seperti ini:

/* Loading effects for main slider */
.slider {
    background: url(img/tail-spin.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100px 100px;
    
    min-height: 100px;
}
.slider img.slick-loading {
    opacity: 0;
}
.slider img {
    transition: opacity 0.3s ease 0s;
}
.slider .slick-loading:after {
    content:'loading'
}

Demo: index4.html

(jangan lupa kalo ngetest pake simulasi slow connection)

Bonus 2: menambahkan Lightbox dengan mudah

Kalo di situs e-commerce, kalo kita klik image utamanya, biasanya kan akan membesar. Pattern ini biasa dikenal dengan nama lightbox.

Mari kita tambahkan ke slider kita. Namun kita butuh JS library lain yang khusus menghandle lightbox.

Ada banyak lightbox library yang bisa kita pake. Dan saya ga punya rekomendasi spesifik si, Namun karena kita pake slick yang butuh jquery, maka kita cari library lightbox yang pake jquery.

Misalnya ini https://lokeshdhakar.com/projects/lightbox2/

Terlihat praktis dan simple, serta bintangnay lumayan di github, terlihat mudah dipake juga. mari kita coba

Supaya praktis Librarynya kita tambahkan dari cdn aja

https://cdnjs.com/libraries/lightbox2

Dan ternyata integrasinya sangatlah mudah

Tambahkan css lightbox

Tambahkan JS nya

Selanjutnya, cukup bungkus tiap-tiap image dengan tag link, dengan hrefnya ke gambar yang mau ditampilkan di lightbox, lalu tambahkan atribut data-lightbox

Jalankan

Demo: index5.html

Yang menarik, library lightbox ini memiliki fitur slider juga

Perhatikan semua link memiliki Atribut data-lightbox="lightbox" jadi semua nilainya sama2 "lightbox"

Hal ini membuat semua image dianggap dalam group yang sama. Sehingga ketika lightbox muncul, kita bisa meggeser-geser ke gambar lain. Seperti halnya slider. Disini kita set semua gambar ke group yang sama "lightbox", jadi kita bisa slide ke semua gambar.