Carousel
Buat sebuah Carousel ??? pita gambar yang dapat digulir dengan mengklik panah.
Nanti kita akan menambahkah lebih banyak fitur: pengguliran tanpa batas, pemuatan dinamis dan seterusnya.
Tambahan: untuk tugas ini, struktur HTML/CSS merupakan 90% dari solusi.
Pita gambar bisa di diwakili sebagai ul/li daftar dari gambar <img>.
Biasanya, pita seperti itu sangat luas, tapi kita akan menambahkan ukuran tetap pada <div> untuk ???memotong??? pita, jadi hanya sebagian dari pita yang kelihatan:
Untuk menampilkan daftar secara horisontal kita perlu menambahkan properti CSS yang benar pada <li>, seperti display: inline-block.
Untuk <img> kita sebaiknya juga mengatur display, karena bawaanya merupakan inline. Ada For <img> we should also adjust display, because by default it???s inline. Ada ruang ekstra yang disediakan di bawah elemen inline untuk ???ekor huruf???, jadi kita bisa menggunakan display:block untuk menghapusnya.
Untuk membuat pengulirannya, kita bisa menggeser <ul>. Ada banyak cara untuk melakukannya, contohnya dengan menganti margin-left atau (performa lebih baik) gunakan transform: translateX():
<div> luar memiliki lebar tetap, jadi gambar ???ekstra??? dipotong.
Keseluruhan carousel adalah ???komponen grafis??? mandiri pada halaman, jadi sebaiknya kita membungkusnya menjadi satu <div class="carousel"> dan menata elemen-elemen ke dalamnya.