#Karusel
“Karusel” yarating – o’qlarni bosish orqali aylantirilishi mumkin bo’lgan tasvirlar lentasi.
Keyinchalik biz unga qo’shimcha funktsiyalarni qo’shishimiz mumkin: cheksiz aylantirish, dinamik yuklash va hk.
P.S. Ushbu vazifa uchun HTML/CSS tuzilishi aslida yechimning 90% ni tashkil qiladi.
Tasvirlar tasmasi <img> ul/li tasvirlar royxati sifatida korsatilishi mumkin.
Odatda, bunday lenta keng bo’ladi, lekin biz uni “kesish” uchun atrofga qattiq o’lchamdagi <div> qo’yamiz, shunda lentaning faqat bir qismi ko’rinadi:
Roʻyxatni gorizontal koʻrsatish uchun ʻ
display: inline-block.
<img> uchun biz displeyni ham sozlashimiz kerak, chunki sukut bo’yicha u inline. “Inline” elementlari ostida “harf dumlari” uchun qoʻshimcha joy ajratilgan, shuning uchun uni olib tashlash uchun “display:block” dan foydalanishimiz mumkin.
O’tkazish uchun biz <ul> ni siljitishimiz mumkin. Buni qilishning ko’plab usullari mavjud, masalan, margin-left ni o’zgartirish yoki (yaxshiroq ishlash) transform: translateX() dan foydalanish:
Tashqi <div> belgilangan kenglikka ega, shuning uchun “qo’shimcha” tasvirlar kesiladi.
Butun karusel sahifadagi mustaqil grafik komponent dir, shuning uchun uni bitta <div class="carousel">ga o’rab, ichidagi narsalarni stilize qilganimiz ma’qul.