Dalam website E-Commerce tentu yang dilihat saat memilih suatu produk kita sebagai user atau konsumen pasti akan melihat foto produknya, selanjutnya akan melihat dari beberapa sudut pandang foto yang ditampilkan. Nah pada artikel ini saya akan membahas tentang bagaimana cara membuat card product dengan html css dan javascript agar terlihat menarik serta peminat pembeli.Baiklah yang pertama harus dipersiapkan text editor sahabat masing-masing untuk memulai ayo kita membuat file index.html ketikan code html seperti berikut

Sahabat jangan lupa persiapkan beberapa foto atau gambar product yang akan dipergunakan ,disini saya menampilkan 4 buah gambar product laptop,ooopss jangan disebutin merknya sahabat.

card-ui-product-html 

Gambar diatas tampilan yang tadi sudah diketikan pada file html ,oke langkah selanjutnya coba kita tambahkan CSS supaya lebih menarik… 

Baiklah langkah selanjutnya kita akan menambahkan javascript pada bagian html berikut :

Langkah berikutnya agar gambar saat di klik dapat berubah ke gambar selanjutnya menggunakan script dibawah ini yang disisipkan sebelum penutup </body>

Oke hasilnya silahkan sahabat jalankan pada browser masing-masing, dan saya kira cukup sampai disini pembahasan tentang cara membuat card product dengan html css dan javascript , semoga bermanfaat dan sampai jumpa lagi pada artikel selanjutnya.

terimakasih,