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

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.

Apakah flickity itu?

Flickity adalah javascript+css yang dapat digunakan untuk membuat slider & carousel. 

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

Slick Slider in Oxygen Builder
10 Contoh Slick Slider di Oxygen Builder & Cara Pembuatannya
Cara membuat slider dengan Slick Slider di Oxygen Builder berisi tahapan pembuatannya, opsi-opsinya dan 10 slider contoh hasilnya.
restore from backup WordPress with WP CLI and SSH
Restore Backup WordPress dengan WP CLI & SSH
Cara me-restore (mengembalikan) data WordPress kita dengan WP CLI & SSH.
Backup Cepat WordPress dengan WP CLI & SSH
Backup WordPress Cepat dengan WP CLI & SSH
Cara backup WordPress secara cepat dengan 1 perintah WP CLI dan 1 perintah SSH, serta membuat script backup dan script autobackup.
PAKET LENGKAP PEMBUATAN WEBSITE
Digitalizer menawarkan jasa pembuatan website untuk company profile, toko online, event organizer, lembaga pendidikan ataupun bidang lainnya. Anda tidak perlu memikirkan tentang domain, webhosting/server, DNS, email, desain, development, security serta masalah teknis lainnya. Cukup siapkan content website anda saja, sisanya kami yang mengerjakannya.
Semua paket pembuatan website sudah termasuk maintenance 1 tahun!
HOT LINK!
Kembali ke atas
cross