Flickity di WordPress & Oxygen Builder

Artikel ini menjelaskan cara untuk membuat slider & carousel dengan flickity di WordPress & Oxygen Builder atau website lainnya.
Share:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
Flickity di WordPress dan Oxygen Builder
Updated: 2 Juli 2021

Dalam mendesain sebuah website, seringkali para konsumen atau desainer menggunakan slider atau carousel untuk memberi memudahkan menjelaskan content pada pengunjung sekaligus juga menambah nilai estetika atau mempercantik.

Kita dapat membuat slider atau carousel dengan menggunakan salah satu javascript library yaitu flickity.

Contoh hasil

Sebelumnya kita lihat dulu bagaimana contoh hasil akhir slider/carousel yang dibuat dengan flickity.js

Kelebihan

1. Responsive

Slider atau caraousel yang dibuat dengan flickity secara otomatis memiliki kemampuan untuk menyesuaikan ukuran dengan resolusi layar yang digunakan.

2. Touchable/Dragable

Selain responsive, slider atau carousel yang dihasilkan juga dapat memiliki fungsi dapat di sentuh geser sehingga lebih memudahkan pengguna khususnya yang menggunakan mobile device.

3. Transisi lebih halus

Transisi antara slide yang dihasilkan flickity terlihat lebih halus tidak terlihat agak tersendat-sendat atau patah-patah.

4. Banyak opsinya

Banyak opsi yang disediakan oleh flickity untuk membantu menyesuaikan kebutuhan desain kita ketika membuat slider atau carousel. Contohnya seperti lazyLoad, wrapAround dan lain sebagainya. Beberapa opsi dapat anda baca di artikel ini bagian Opsi Pada Flickity.

Cara Instalasi

Ada beberapa cara untuk instalasi flickity di WordPress:

  1. Html & CSS
  2. jQuery
  3. Vanilla Script

Pada dasarnya ketika kita ingin menggunakan flickity, kita membuat satu div (parent element) dengan class carousel atau class lain yang kita tentukan sendiri, dan didalam div tersebut kita mengisi beberapa div (child element) dengan class carousel-cell untuk menandakan bahwa div tersebut adalah satu carousel/slider tersendiri.

Susunan DIV flickity di Oxygen Builder
Susunan DIV flickity di Oxygen Builder

PENTING! Set display: block untuk div yang memiliki class .carousel!

Set Display:block untuk div .carousel

Contoh Kode

1. Menggunakan HTML & CSS

Dibawah ini contoh kode HTML & CSS untuk membuat slider dengan flickity. Silahkan modifikasi sesuai kebutuhan anda.

Kode HTML

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<!-- JavaScript -->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<!-- html -->
<div class="carousel" data-flickity='{ "freeScroll": false, "wrapAround": true, "autoPlay": 2000 }'>
  <div class="carousel-cell" style="background:url(https://www.digitalizer.my.id/wp-content/uploads/2020/11/headroom-js-pada-WordPress-dan-Oxygen-Builder.jpg); background-size:cover;background-position:center;"></div>
  <div class="carousel-cell" style="background:url(https://www.digitalizer.my.id/wp-content/uploads/2020/10/Parallax-Effect-with-Rellax-JS-in-Oxygen-Builder.jpg);background-size:cover;background-position:center;"></div>
  <div class="carousel-cell" style="background:url(https://www.digitalizer.my.id/wp-content/uploads/2020/10/setting-website-selalu-menggunakan-https-ssl.jpg);background-size:cover;background-position:center;"></div>
  <div class="carousel-cell" style="background:url(https://www.digitalizer.my.id/wp-content/uploads/2020/10/menambah-email-di-outlook.jpg);background-size:cover;background-position:center;"></div>
  <div class="carousel-cell" style="background:url(https://www.digitalizer.my.id/wp-content/uploads/2020/07/apa-itu-wordpress.jpg);background-size:cover;background-position:center;"></div>
</div>

Kode CSS

.carousel {
  background: #eee;
  display: block;
}

.carousel-cell {
  width: 66.6%;
  height:400px;
  margin-right: 10px;
  border-radius: 5px;
}

2. Menggunakan jQuery

Script jQuery dibawah ini dapat menggantikan inisiasi flickity dengan HTML (tetap perhatikan penambahan CSS nya juga).

Saya membuatnya dengan menambahkan kode tersebut pada code block Oxygen Builder. Kelebihannya adalah kita bisa lebih mudah untuk mensetting div child elementnya nya karena bisa diatur melalui panel Oxygen Builder.

jQuery('.carousel').flickity({
  // options
  freeScroll: false,
  wrapAround: true,
  content: true,
});

Bagi anda yang belum mengetahui tentang Oxygen Builder bisa baca artikel kami "Oxygen Builder, Plugin Page Builder WordPress Terbaik?"

3. Menggunakan Vanilla Script

Jika anda ingin menggunakan Vanilla Script untuk inisiasi flickity bisa menggunakan contoh kode seperti dibawah ini. Jangan lupa tetap perhatikan penambahan CSS nya juga.

var elem = document.querySelector('.carousel');
var flkty = new Flickity( elem, {
  // options
  cellAlign: left,
  freeScroll: false,
  wrapAround: true,
  contain: true
});

// element argument can be a selector string
//   for an individual element
var flkty = new Flickity( '.carousel', {
  // options
});

Opsi pada Flickity

dragable

Bisa di "drag" (klik dan geser). Defaultnya enable untuk 2 slide atau lebih.

// untuk men-disablenya
draggable: false

// untuk meng-aktivasinya
draggable: true

freeScroll

Opsi ini untuk membebaskan geseran slide tidak harus selalu pas satu slide.

// untuk men-disablenya
freeScroll: false

// untuk meng-aktivasinya
freeScroll: true

prevNextButton

Opsi ini untuk memunculkan panah navigasi pada sisi kiri dan kanan slider

// untuk men-disablenya
prevNextButtons: false

// untuk meng-aktivasinya
prevNextButtons: true

wrapAround

Opsi ini jika diaktifkan maka setelah slider terakhir akan kembali ke slider awal lagi (infinite slide).

// untuk men-disablenya
wrapAround: false

// untuk meng-aktivasinya
wrapAround: true

groupCells

Opsi ini menyebabkan elemen beberapa carousel-cell menjadi satu group, sehingga sekali geser maka akan menggerakan beberapa cell sekaligus.

// opsi menggerakan beberapa cell sesuai kapasitas yang ditampung pada viewport tersebut sekaligus
groupCells: true

// jika di isi angka, maka grouping cell akan sesuai angka yang dimasukan
groupCells: 2

// jika di isi persen, maka grouping cell akan dikelompokkan sesuai jumlah prosentase pada viewport yang sedang aktif
wrapAround: 80%

autoPlay

Opsi ini akan menggerakan slider secara otomatis

// otomatis bergerak setiap 3 detik
autoPlay: true

// otomatis bergerak setiap input angka dalam millisecond
// contoh opsi slider bergerak otomatis dalam 1500ms atau 1.5s
autoPlay: 1500 

pauseAutoPlayOnHover

Jika dikombinasikan dengan autoPlay, maka kita bisa menentukan apakah slider akan berhenti ketika di hover atau tidak.

// defaultnya slider akan berhenti ketika di hover
pauseAutoPlayOnHover: true

// slider tidak akan berhenti ketika di hover
pauseAutoPlayOnHover: false

Referensi

Anda bisa mengunduh javascript+css flickity dan mengetahui lebih lengkap tentang opsi-opsi lainnya di situs https://flickity.metafizzy.co/.

Banner Homepage Flickity

Penutup

Demikian sedikit penjelasan tentang flickity di WordPress & Oxygen Builder. Namun teknik ini bisa kita gunakan terapkan pada website apapun, hanya perlu di adaptasikan sesuai platformnya masing-masing.

Bagaimana menurut anda? Silahkan berikan tanggapan anda pada kolom komentar dibawah.

Salam Digital!

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Artikel Terkait Lainnya
Membuat off canvas menu dan tombol hamburger beranimasi di Oxygen Builder
Tutorial membuat canvas menu dan tombol hamburger beranimasi di Oxygen Builder
Baca selengkapnya....
Cara Membuat Menu Di Luar Kanvas dengan Oxygen Builder
Artikel ini menjelaskan tentang cara pembuatan menu di luar kanvas pada website yang menggunakan CMS WordPress dan plugin Oxygen Builder
Baca selengkapnya....
Konversi Website ke Oxygen Builder (Studi Kasus)
Apakah anda ingin mengkonversi website yang menggunakan Oxygen Builder? Berikut contoh kasus dan peningkatan kinerja hasil optimasinya.
Baca selengkapnya....
Bagaimana Cara Membuat Slider Dinamis dengan Flickity di Oxygen Builder Repeater?
Tutorial ini menjelaskan cara membuat slider dinamis menggunakan flickity yang digabungkan dengan elemen Oxygen Builder Repeater.
Baca selengkapnya....
5 Format Gambar untuk Optimasi Website
Artikel ini berisi pengenalan tentang beberapa format gambar yang umumnya digunakan pada website agar kita dapat memilih yang paling optimal.
Baca selengkapnya....
Kembali ke atas
logo digitalizer
© 2011 - 2021 Digitalizer My ID - Allright Reserved
cross