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.
Share:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
flickity di Repeater Oxygen Builder

Hi Sahabat Digital! Kalau pada artikel yang lalu kami membuat tulisan tentang penggunaan flickity di WordPress & Oxygen Builder untuk membuat slider dan carousel, namun menggunakan data statis. Maka di artikel tutorial kali ini kita akan melihat contoh penggunaan flickity di repeater Oxygen Builder untuk membuat slider dinamis yang bisa berubah-ubah isinya sesuai jenis content atau data yang diambil.

Pendahuluan

Salah satu element yang disediakan pada Oxygen Builder adalah repeater.

Elemen repeater merupakan elemen untuk menampilkan data dinamis berulang yang diambil dari query data.

Anda bisa membaca tentang elemen repeater ini di halaman dokumentasi Oxygen Builder.

Slider atau Carousel yang dibuat dengan bantuan dari flickity.js juga bisa di kombinasikan dengan repeater sehingga kita bisa membuat slider atau carousel dari data dinamis.

Untuk anda yang belum mengetahui tentang Oxygen Builder & flickity bisa membaca artikel kami:

- Oxygen Builder, Plugin Page Builder WordPress Terbaik?

- Flickity di WordPress & Oxygen Builder.

Contoh Slider Dinamis

Contoh berikut ini, adalah slider yang menampilkan featured image dari 5 portofolio terbaru. Gambarnya akan selalu berubah secara dinamis mengikuti portfolio terbaru yang kami buat.

Langkah-Langkah Pembuatan

  1. Tambahkan elemen "Repeater"
  2. Tambahkan elemen pada Div di dalam repeater, dalam contoh diatas adalah gambar dan teks yang akan diambil dari artikel.
Struktur HTML flickity di Repeater Oxygen Builder dalam pembuatan slider dinamis
Struktur HTML flickity di Repeater Oxygen Builder dalam pembuatan slider dinamis
  1. Insert data gambar unggulan untuk gambar dan judul pada teks.
  2. Masukan query pada repeater sesuai kebutuhan, dalam contoh ini untuk 5 post, tanpa pagination.
post_type=post&no_found_rows=true&posts_per_page=5
  1. PENTING! Tambah class rep-carousel pada repeater & class rep-carousel-cell pada Div di dalam repeater untuk menargetkan elemen agar menjalankan flickity di repeater Oxygen Builder. Juga tentukan lebar Div dan ukuran lainnya jika diperlukan (misalkan lebar image).
Tambahkan class rep-carousel dan rep-carousel-cell untuk menargetkan fungsi flickity di repeater Oxygen Builder
Tambahkan class rep-carousel dan rep-carousel-cell
  1. Atur rep-carousel memiliki display: block (di Advanced Tab - Layout)
  2. Tentukan lebar DIV dan ukuran lainnya jika diperlukan (misalkan lebar gambar).
  3. Tambah elemen "Code Block" di luar elemen repeater, di isi dengan:

a. HTML script untuk memanggil CSS dan JS flickity

<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

b. Anda bisa menambahkan CSS untuk elemen yang anda masukan didalam div repeater sesuai kebutuhan anda.

/* text link berwarna putih */
.title-rep-flick a {color:#fff;}

/* gambar gelap */
.image-rep-flick {
  filter: brightness(50%);
}

/* gambar berubah terang ketika di sorot */
.image-rep-flick:hover {
  filter: brightness(90%);
  transition: 0.3s all ease-in;
}

c. Javascript untuk inisiasi flickity. Untuk daftar pilihan option yang lebih lengkap silahkan baca "Opsi pada Flickity di WordPress & Oxygen Builder."

jQuery('.rep-carousel').flickity({
	freeScroll: false,
	wrapAround: true,
	content: true,
	autoPlay:false
});
  1. Simpan dan lihat di halaman depan artikel anda.

Penting! Kami mempunyai pengalaman fungsi flickity pada repeater bermasalah karena adanya fitur lazy load gambar dari Litespeed Cache plugin. Solusinya fitur lazy load kami nonaktifkan dengan penambahan class wmu-preview-img untuk elemen gambar.

Referensi

Penutup

Demikian langkah-langkah menggunakan Flickity di Repeater Oxygen Builder yang bisa kita gunakan untuk membuat slider ataupun carousel.

Dengan menggunakan teknik ini, selain kita bisa membuat slider atau carousel dinamis, juga relatif lebih ringan daripada menggunakan plugin tambahan, karena hanya memanggil asset yang kita butuhkan saja.

Bagaimana menurut anda? Apakah ada teknik lain selain menggunakan flickity yang lebih menarik untuk di aplikasikan dalam pembuatan slider & carousel pada website anda? Silahkan beri tanggapan 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