Di artikel sebelumnya kita sudah berkenalan dengan slick slider dan dasar pemakaiannya. Dimana slick slider adalah library populer untuk bikin berbagai variasi web slider dengan mudah.

Di part 2 ini, kita akan mulai praktek studi kasus membuat slide show banner. Kira-kira seperti banner di halaman depan situs e-commerce, misal JD.id. Dimana promo-promo ditampilkan bergiliran, dan bisa diklik.

Sebenarnya dokumentasi di situsnya slick slider sudah cukup baik disertai berbagai contoh dan referensi konfigurasinya. Buat yang sudah paham html, css dan js, bisa cukup refer ke situ.

Artikel ini ditujukan untuk walkthrough bagi pemula sehingga mengetahui langkah2 nya. Karena dijelaskan step by step dengan mudah. Mulai dari html, CSS styling hingga scriptnya. Demo dan file latihan juga tersedia per step, bisa didownload di akhir artikel.

Banner yang mau dibikin

Spesifikasi/requirements nya seperti ini:

• tiap slide hanya mengandung image yang memiliki link
• ada arrow/panah kiri kanan, Mereka secara default disembunyikan dan hanya muncul ketika mouse pengguna ada di atas banner (sedang dihover mouse). Hal ini bagus dalam segi UI/UX, karena arrow kanan kiri keberadaannya potensial menutupi konten banner.
• ada dot navigation di bawah. Memang Agak redundan dengan tombol arrow kanan kiri si ya. Tapi ini bagus untuk merepresentasikan jumlah banner yang ada. Sehingga pengunjung bisa mengira2 ada berapa jumlah banner promonya.
• banner bisa diswipe pake jari, khususnya untuk pengguna tablet/mobile
• Semua dimensi ukuran image banner selalu sama, hal ini agar lebih sederhana
• Menerapkan responsive design. Artinya banner selalu terlihat utuh di berbagai ukuran device. Baik Desktop/laptop/tablet/smartphone. Sehingga proporsi lebar dan tingginya selalu tetap.

Kira-kira seperti ini nanti hasil akhirnya.

Prerequisite/ prasyarat

Untuk mengikuti artikel ini diasumsikan tahu dikit tentang html, css, dan JS. Dikit aja gpp.

*Mohon saran jika penyajiannya kurang enak, misal terlalu mudah/dangkal, atau mungkin terlalu susah dan membingungkan.

Software yang dibutuhkan

• Teks editor. Apa aja. Notepad++, Visual Studio Code, atau Sublime Text adalah contoh yang bagus.
• Browser. Mana aja favorit anda. Misal Chrome

Oke langsung aja, mari berkreasi!

Getting Started

Pertama2, kita memulai dengan membuat halaman html sederhana. Nyalakan teks editor anda dan buatlah file baru, misal bernama index.html

Kerangka htmlnya paling sederhana kira2 seperti ini

Demo: index1.html

Div container adalah yang membungkus konten2, (soalnya secara visual nanti kita buat bingkai kotak).

Jalankan di browser, maka anda akan mendapatkan halaman polos

Ya masi jelek karena belum ada styling sama sekali

Mari sekarang kita tambahkan styling dan javascript. Sekaligus dependensi library slick slider dan jquery

Untuk teksnya kita isi lorem ipsum aja, karena ga tau mo diisi apa.

Slick slider kita ambil dari CDN aja biar praktis. https://www.jsdelivr.com/ layanan gratis dimana mereka menyediakan libray2 JS populer dalam CDN mereka, kita langsung tinggal tunjuk aja.

Misal jquery versi 3.5.1 ada di https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js

Jadi daripada kita download sendiri file js nya, lebih praktis tinggal refer ke salah satu layanan CDN kayak jsdelivr ini. Terutama untuk keperluan tutorial kayak gini.

Oke jadi untuk slick kita butuh 2 css dan 1 js, seperti udah dibahas di artikel sebelumnya

Untuk css kita pasang di bagian head, yaitu di dalam tag head

Lalu kita juga tambahkan css sederhana kita di lokasi head juga

*supaya artikel ini sederhana, kita tidak membuat script dan style di file terpisah (external). Melainkan kita taruh di html langsung (internal).

Kita buat background webpage kita abu2 #dedede
Dan font nya verdana, serta bbrp font lain sebagai cadangan kalo verdana ga ada.

.container kita hias berupa kotak dengan background putih #fff
Max-width untuk membatasi lebarnya biar bagus.

Javascript

Kita taruh di bawah, sebelum penutup tag body

Tambahkan jquery dan slick library dari jsdelivr cdn

Lalu script kita ditaruh di bawahnya

Yang diatas adalah template umum jquery, dimana kita menjalankan script setelah document ready (alias dom nya udah keload semua)

Lengkapnya jadi gini:

Horee sekarang tampak lumayan lah

Demo: index2.html

Mari kita buat markup untuk slick.

Slick sangat mudah dipake, kita pada dasarnya cukup mempersiapkan elemen induk, lalu di dalamnya terdapat elemen anak2.

Kalo induknya, yaitu .slider kita slick in, maka berubah jadi slider. Gampang dan sederhana.

Langsung aja, mari kita buat markup slick kita, yang isinya adalah gambar2 berlink

Karena saya ga ada ide mo ngelink kemana, jadinya linknya saya kosongin aja, diset ke #, jadi kita tambahkan atribut href=”#”.

Yep tiap2 slide adalah link berisi gambar. Gambar2nya saya ambil dari unsplash yang lisensinya bebas. (credits sumber image ada di bawah artikel ini).

Masi kita slide show kan

Mudah sekali cukup lakukan “slick” pada div class=”slider nya

Perhatikan, pada slick, parameternya adalah obyek config

{
    autoplay: true,
    autoplaySpeed: 2500
}

Disini kita mengeset autoplay, artinya banner akan otomatis sliding tiap interval tertentu.
Dan kecepatannya kita set 2500, dalam satuan milisecond, berarti 2,5 detik

Satu lagi, kita styling dikit dulu.

.slider .slick-slide {
    border: solid 1px #000;
}
.slider .slick-slide img {
    width: 100%;
}

Hanya sekedar menambahkan border di keseluruhan slider. Serta mengeset lebar img agar 100%. Cukup untuk membuatnya menyesuikan dengan lebar induknya, dan responsive!

Oiya, di awal kita taruh teks lorem ipsum. sekarang kita hapus aja biar bersih. Html lengkapnya bisa dilihat di demo index3.html

Jalankan, dan akan berubah jadi image slideshow, lengkap dengan panah kanan kiri (default), walo samar2.

Kalo kita swipe slidehownya juga udah geser2.

Cobalah test resize ukuran browser anda. Maka imagenya akan menyesuikan dengan ukuran kontainernya. Dan slick akan meng calculate ulang semuanya hingga slideshownya tetep jalan.

Gampang banget kan. By default slick udah mengurus banyak hal. jadi tau beres.

Menambah dot navigation

Sekarang mari kita tambah dotted navigation

Mudah sekali cukup di parameter obyek config nya tambahkan dots: true, Langsung keluar dotted nav di bagian bawah!

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

Demo: index4.html

Styling

Sekarang mari kita percantik slider kita

Yang perlu kita lakukan disini adalah cukup memperhatikan markup/struktur kode html yang dihasilkan oleh si slick.

Karena kita meload styles milik slick, maka slider kita udah memiliki styling dasar. Nah kita juga bisa merefer file css tersebut untuk mengoverride/menimpa bagian2 yang kita ingin rubah. Atau bahkan mengganti sepenuhnya dengan CSS kita sendiri.

File-file style default yang udah kita load sebelumnya di bagian head adalah

• https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css
• https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css

Langsung aja kita coba styling.

Untuk saat ini kita tidak memodifikasi 2 file default diatas, melainkan kita menambahkan CSS sendiri dengan pake teknik override/menimpa. Sehingga css default slick digantikan dengan css kita sendiri.

Buat tombol prev & next lebih besar

.slick-prev, .slick-next {
    width: 50px;
    height: 50px;
    z-index: 1;
}

Geser posisinya, supaya tombol panah berada di dalem area banner

.slick-prev {
    left: 5px;
}
.slick-next {
    right: 5px;
}

Gambar panah kira & kanan default pada slick ternyata menggunakan icon font, jadi pada dasarnya ia adalah font.

Jika sebelumnya kita Cuma memperbesar buttonnya, Mari kita memperbesar font nya juga, agar simbolnya membesar juga.

Kita juga kasi shadow, karena buttonnya warna putih, supaya tetap jelas ketika di atas gambar terang.

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

Mari kita pindahkan dotted nav di bagian bawah, supaya naik masuk area slider

/* move dotted nav position */
.slick-dots {
    bottom: 15px;
}

Ubah ukuran dan warnanya. Seperti arrow, dots ternyata juga font

Warna standar kita ganti putih, warna aktif kita ganti abu2. juga ditambahkan bayangan.

/* enlarge dots and change their colors */
.slick-dots li button:before {
    font-size: 12px;
    color: #fff;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
    opacity: 1;
}
.slick-dots li.slick-active button:before {
    color: #dedede;
}

Hore lebih cakep.

Demo: Index5.html

Nah sekarang yang terakhir, kita ingin supaya panah kiri kanan nya ga muncul by default, dan hanya muncul ketika mouse menghover area banner? Gimana caranya.

Mudah saja dengan CSS-only

Tinggal tambah rule :not(:hover) pada .slider, dan nol kan opacity, seperti berikut

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

Biar lebih bagus, dikasi efek transisi

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

Demo: index6.html

Efek transisi ketika sliding.

By default, efek yang dipakai ketika banner berganti adalah slide.
Slick juga menyediakan efek transisi lain berupa fade.

Cukup tambahkan fade: true pada config

$('.slider').slick({
    autoplay: true,
    autoplaySpeed: 2500,
    dots: true,
    fade: true
});

Memang efek built in yang diberikan terbatas slide dan fade, namun kita juga bisa membuat efek transisi dengan CSS. Mungkin akan kita bahas kapan2.

Nanti di artikel lain kita coba bikin variasi selanjutnya.

Referensi

• Situs resmi slick slider https://kenwheeler.github.io/slick/

Attribution Foto

• Photo 1 by Microsoft Edge on Unsplash
• Photo 2 by XPS on Unsplash
• Photo 3 by Windows on Unsplash
• Photo 4 by Bryan Pelayo on Unsplash
• Photo 5 by Unsplash on Unsplash