Image Slider Responsive dengan Jquery & CSS3

Dalam kesempatan ini kita akan mencoba membuat image slider yang responsive dari Impressionist UI. Kita akan membuatnya dengan menggunakan plugin FlexSlider sebagai fungsi-fungsi javascriptnya dan CSS3 sebagai stylenya. Semoga artikel ini dapat menambah wawasan dan sebagai referensi kita.

Langkah 1

Markup html slider sangatlah simple. Kita akan membuat <div> dengan class “flex-container”, kemudian di dalam <div> kita akan menambahkan satu lagi <div> dengan class “flex-slider”, kemudian didalam <div> ini kita akan tempatkan seluruh slider controls. Setelah itu kita akan menggunakan tag list untuk menambahkan semua slide. Masukan setiap slide kedalam elemen list.

p1

Kemudian kita akan memasukan library JQuery dan plugin FlexSlider. Untuk me-load slider, masukan code dibawah ini, kamu juga dapat mensetting parameter yang ada didalamnya. Untuk lebih jelas silahkan kunjungi website nya.

p2

Langkah 2

Pertama kita akan menambah style reset untuk membersihkan semua margin, padding, dll. sehingga dapat menjaga konsistensi di semua browser.

p3

Kemudian pertama-tama kita akan men-hide slide terlebih dahulu untuk menghindari gambar yang menumpuk/ loncat-loncat selama proses membuka halaman. Kemudian kita juga akan mengatur beberapa style untuk image.

p4

Langkah terakhir, kita tambahkan beberapa style untuk membersihkan floats pada slides.

p5

Langkah 3 – Container Styles

Untuk container kita set warna background menjadi putih, dan tambahkan sedikit bayangan dengan menggunakan properti CSS3 “box-shadow”. Lalu tambahkan padding 10px dan rounded corners.

p6

Kita telah men-set lebar maksimal dan minimal untuk slider. Anda mungkin membutuhkan perubahan atau menghapusnya ketika akan menerapkannya dalam project Anda. Kita set properti zoom menjadi 1, itu akan menghindari perubahan ukuran pada browser mobile.

p7

Langkah 4 – Tombol Panah Next dan Previous

Untuk tombol next dan previous kita akan menambahkan gradien green CSS3, setting lebar dan tinggi, dll. Untuk align button vertikal, kita membutuhkan 50% posisi dari atas dan menambahkan margin negatif setengah dari lebar tombol.

p8

Tombol panah akan dibuat dengan menggunakan pseudo-selector “:before”. Pseudo selector ini memungkinkan untuk memasukan beberapa konten tanpa menambahkan tag baru pada html. Untuk membuat efek ribbon, kita gunakan border trick, sehingga dapat dibuat hanya menggunakan CSS, shape ini juga akan kita masukan pada pseudo-selector “:after”.

p9

Terakhir, tambahkan rounded corner pada tombol, pada posisi kiri dan kanan tombol, kemudian tambahkan “triangles” sehingga membuat efek ribbon.

p10

Langkah 5 – Slider Controls

Slider controls adalah lingkaran kecil yang ada pada ujung slider yang memungkinkan kita untuk mengklik pada slide. Kita akan posisikan dibawah slide pada container. Kemudian kita buat lingkaran dengan menggunakan properti “border-radius” dan “box-shadow”. Untuk lingkaran slide yang aktif, kita hapus box shadow dan tambahkan CSS3 gradien yang sama yang kita gunakan pada tombol.

p11

Langkah 6 – Caption

Kita hampir selesai, buat beberapa style sederhana untuk Caption. Set warna background hitam dengan sedikit warna transparan menggunakan mode warna rgba. Kemudian letakkan itu pada bagian bawah slide.

p12

Comments

comments