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.
Updated: 10 Januari 2021
Bagikan:
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 post terbaru. Gambarnya akan selalu berubah secara dinamis mengikuti artikel 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. 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 yang lebih lengkap silahkan baca "Opsi pada Flickity di WordPress & Oxygen Builder."

(function($) {
   $('.rep-carousel').flickity({
    cellSelector: '.rep-carousel-cell',
    freeScroll: 'false',
    wrapAround: 'true',
    autoPlay: 'true',
    });
})(jQuery);
  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 TERBARU
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....
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!
logo digitalizer
© 2020 - 2021 Digitalizer My ID - Allright Reserved