Cara menambahkan slider gambar sebelum dan sesudah di Webflow

Slider before after adalah salah satu cara tercepat untuk menunjukkan hasil pekerjaan Anda. Yang perlu dilakukan seseorang hanyalah menggeser pembatas untuk melihat efek dari desain ulang, renovasi, atau retouching Anda. Mereka tidak perlu memandangi gambar yang disandingkan atau bermain tebak-perbedaan — hasilnya langsung terlihat di depan mata.

Baik Anda menjalankan agensi maupun bekerja sebagai freelancer, desainer, fotografer, seniman, kontraktor, atau siapa pun yang ingin memamerkan hasil karya, slider before after adalah cara yang tepat untuk melakukannya. Sayangnya, meskipun menjadi salah satu pembuat website paling canggih (dan populer di kalangan desainer), Webflow tidak memiliki slider gambar sebelum dan sesudah bawaan. Jika Anda ingin menambahkannya, ada tiga opsi: Menginstal “cloneable” dari komunitas, menyematkan widget hosted gratis, atau membuatnya dari awal menggunakan mesin interaksi native Webflow (IX2).

Kami membahas masing-masing opsi ini di bawah.

Opsi 1: Gunakan Webflow cloneable

Insting pertama Anda mungkin adalah mencari di showcase Made in Webflow atau situs seperti Flowbase untuk menemukan “cloneable.” Meskipun cara ini bisa berhasil, prosesnya tidak selalu mudah.

Kelemahan terbesarnya adalah Anda terikat pada cara kerja orang lain. Anda harus benar-benar mengikuti arsitektur dan konvensi penamaan yang sudah ada di cloneable tersebut. Ini bisa mencakup ketergantungan pada custom attribute, aturan CSS, dan absolute positioning. Jika ada yang salah sedikit saja, slider tidak akan berfungsi. Menambahkannya di akhir proses desain juga bisa membuat Anda harus memikirkan ulang beberapa elemen lainnya.

Namun jika Anda tetap ingin menggunakan cara ini, berikut langkah-langkah untuk menambahkan cloneable:

1. Temukan cloneable slider before after yang masih aktif diperbarui dan memiliki lisensi yang mengizinkan Anda menggunakannya. Clone ke proyek Anda sendiri.

2. Ganti dengan gambar Anda sendiri. Jangan mengatur ulang nested div, mengubah nama apa pun, atau mencoba merapikan struktur — hal itu bisa merusak slider.
3. Publikasikan situs Anda dan uji coba. Pastikan slider berfungsi di desktop maupun perangkat mobile. Jika Anda tidak sengaja mengubah sesuatu, JavaScript mungkin tidak berjalan dengan benar dalam kondisi tertentu.

Secara keseluruhan, metode ini memang bisa digunakan, tetapi sangat merepotkan untuk komponen visual yang sederhana — dan kemungkinan besar Anda tidak akan mendapatkan kontrol sebanyak yang diinginkan. Setiap perubahan desain yang Anda buat harus tetap mengikuti struktur aslinya, kecuali Anda mau menulis ulang script yang mengendalikannya.

Opsi 2: Gunakan widget slider no-code gratis (direkomendasikan)

Jika Anda ingin menghindari kerumitan mengatur nested div block, mengonfigurasi custom attribute, dan — jika terjadi masalah — men-debug JavaScript yang ditulis orang lain, cara termudah adalah menggunakan hosted embed seperti Widget Slider Before and After dari Jotform. Widget ini sangat mudah diatur dan mengatasi banyak masalah yang muncul pada cloneable.

Berikut cara menambahkan slider gambar sebelum dan sesudah di Webflow dengan Jotform:

1. Buka Widget Slider Before and After dari Jotform dan masuk ke akun Jotform Anda. Jika belum memiliki akun, Anda bisa mendaftar selama proses pengaturan. Gratis.

2. Beri judul pada widget Anda dan tambahkan pasangan perbandingan gambar. Anda bisa mengunggah gambar secara langsung atau menambahkannya dari URL. Jika mau, Anda juga bisa menambahkan keterangan pada setiap pasangan gambar dan mengubah labelnya. Selanjutnya, atur apakah pengguna perlu menggeser handle untuk melihat before dan after, atau apakah efeknya aktif saat hover. Setelah selesai, klik Continue. 

3. Sekarang saatnya menata gaya slider Anda. Anda bisa mengatur warna, branding, font, dan tampilannya. Jika sudah puas dengan hasilnya, klik Continue lagi.

4. Terakhir, konfigurasikan tata letak. Pilih apakah Anda ingin slider horizontal atau vertikal, di mana posisi awal pembatas, seberapa lebar ukurannya, dan apakah slider ditampilkan di perangkat mobile, desktop, atau keduanya. Lalu klik Try it on your website for free.

5. Klik Copy Code untuk menyalin kode embed ke clipboard Anda, lalu kembali ke situs Webflow Anda.

6. Buka menu Add dan pilih Code Embed. Tempelkan kode embed dan posisikan blok tersebut di situs Anda. Klik Publish dan slider akan langsung aktif di situs Anda. Semudah itu.

Seperti yang bisa Anda lihat, cara no-code gratis ini jauh lebih sederhana dibandingkan opsi cloneable. Lebih mudah ditata gayanya, tidak perlu khawatir soal custom attribute, nama class yang ketat, atau JavaScript, dan langsung berfungsi. Jika Anda ingin mengubah sesuatu, cukup kembali ke Jotform dan edit pengaturan slider before and after Anda.

Opsi 3: Buat secara manual menggunakan Webflow Interactions

Bagi pengguna Webflow sejati yang menginginkan kontrol penuh dan tidak ingin menggunakan JavaScript buatan orang lain atau widget eksternal, Anda bisa membangun slider menggunakan mesin interaksi native Webflow, IX2. Membuat slider kode kustom di Webflow adalah metode yang paling canggih dan rumit, tetapi metode ini memungkinkan Anda mengontrol secara persis tampilan dan perilakunya.

Untuk membuat webflow slider perbandingan gambar sendiri menggunakan IX2, Anda perlu menumpuk dua gambar dalam container yang diposisikan secara relatif, dengan masing-masing gambar berada di div block-nya sendiri. Untuk gambar atas, div block berfungsi sebagai mask.

Selanjutnya, untuk interaksi before after di Webflow, Anda perlu membuat Mouse Move Interaction. Atur Trigger ke Mouse X dan target ke div mask. Atur properti animasi ke Width dan buat rentangnya antara 0 hingga 100 persen. Dengan begitu, pergerakan sumbu X mouse mengontrol tumpang tindih antara kedua gambar.

Tentu saja, jika Anda ingin ada pembatas di antara kedua gambar, Anda harus membuatnya sendiri. Dan menyinkronkannya secara sempurna dengan pergerakan mouse membutuhkan keahlian animasi Webflow tingkat lanjut.

Meskipun alat bawaan Webflow bisa digunakan, mengatur semuanya dengan benar membutuhkan banyak penyesuaian dan pemahaman mendalam tentang cara menggunakan Webflow. Anda juga harus menyiapkan animasi yang berbeda jika ingin slider berfungsi di perangkat mobile. Apa yang Anda dapatkan dalam hal kontrol, harus Anda korbankan dalam hal kemudahan.

Tingkatkan situs Webflow Anda dengan widget no-code yang cerdas

Cara tercepat, termudah, dan paling praktis untuk menambahkan slider gambar sebelum dan sesudah di Webflow adalah dengan Widget Slider Before and After dari Jotform. Widget ini tidak memiliki kekurangan seperti menggunakan cloneable perbandingan gambar di Webflow dan jauh lebih sederhana daripada membuatnya sendiri dengan IX2. Menggunakan opsi serverless yang andal menghemat banyak jam pengembangan dan memastikan desain responsif yang solid setiap saat.

Selain itu, Jotform memiliki berbagai widget website gratis lainnya yang mampu membawa situs Anda ke level berikutnya. Jika Anda ingin menambahkan ulasan Google, kontrol aksesibilitas, tombol back-to-top yang sederhana, atau puluhan fungsionalitas berguna lainnya, jelajahi direktorinya. Anda juga bisa menggunakan integrasi Jotform-Webflow untuk menghubungkan alat pengumpulan data canggih dari Jotform langsung ke situs Anda.