Komparasi adalah cara menampilkan suatu perbandingan bisa dari spesifikasi,harga,maupun bentuk dari kondisi 2 atau lebih barang maupun gambar sekalipun dapat dibuat sebuah komparasi, jadi pada artikel ini saya akan membahas tentang bagaimana Cara Membuat Slider Komparasi Gambar Dengan JQuery dan CSS3 ,sebelum memulai sahabat bisa siapkan 2 buah gambar untuk membuat komparasinya,seperti contoh dibawah ini gambar yang saya pakai:

contoh-gambar-1   contoh-gambar-2

Langkah Selanjutnya sahabat bisa menyiapkan file HTMLnya ketik seperti dibawah ini :

file-html-yg-dipakai

Jika sudah dibuat berikutnya tambahkan CSS juga yaaaa :

file-css-sekarang

Langkah selanjutnya saya membuat link untuk plugin comparasion ya pada file HTML :

twenty-plugin

sahabat bisa langsung kunjungi websitenya lalu donwload link disini.

Jangan lupa sahabat tambahkan script dibawah ini untuk membantu tampilan slidernya:

javascript-slider

Untuk membuat slider komparasi dengan [data-orietation!=’vertical’] ini diberi nilai vertikal karena slider comparasi digeser secara vertikal, sedangkan dari plugin kita pakai .twentytwenty({default_offset_pct:0.547} ini adalah posisi nilai vertikal pada gambarnya.

Jika sudah selesai diketikan coba sahabat jalankan pada browser masing-masing dan hasilnya seperti berikut ini:

view-slider-comparasion

Demikian pembahasan artikel Cara Membuat Slider Komparasi Gambar Dengan JQuery dan CSS3 ,semoga bisa langsung dicoba dan dikembangkan lagi ya sahabat. Sampai berjumpa lagi pada artikel selanjutnya.

terima kasih,