Tasvir elementlari yoki matnli karusel slaydlari bo'ylab aylanish uchun slayd-shou komponenti. Page Visibility API-ni qo'llab-quvvatlaydigan brauzerlarda, veb-sahifalar foydalanuvchiga ko'rinmasa (masalan, brauzer faol bo'lmaganda, brauzer oynasi kichraytirilganda va hokazo) karusel slaydni almashtirishdan qochadi. Ichki karusellar qo'llab-quvvatlanmaydi.
Misol
Internet Explorer 9 da animatsiyalar qo‘llab-quvvatlanmaydi
Bootstrap animatsiya uchun faqat CSS3 dan foydalanadi, lekin Internet Explorer 9 kerakli CSS xususiyatlarini qo'llab-quvvatlamaydi. Shunday qilib, ushbu brauzerdan foydalanganda slaydga o'tish animatsiyasi mavjud emas. Biz ataylab o'tishlar uchun jQuery-ga asoslangan neytrallashni qo'shmaslikni tanladik.
Dastlabki faol element talab qilinadi
.active sinfi slaydlardan biriga qo'shilishi kerak. Aks holda, karusellar ko'rinmaydi.
Qo'shimcha sarlavhalar
Har qanday .carousel-itemdagi .carousel-caption elementi yordamida slaydlaringizga sarlavhalarni osongina qo'shing. U erga qo'shimcha HTML kodini joylashtiring va u avtomatik ravishda tekislanadi va formatlanadi.
Birinchi slayd yorlig'i
Nulla vitae elit libero, a pharetra augue mollis interdum.
Ikkinchi slayd yorlig'i
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Uchinchi slayd yorlig'i
To'g'ridan-to'g'ri commodo cursus magna, scelerisque nisl consectetur.
...
Mavjudlik muammosi
Karusel komponenti mavjudlik standartlariga umuman javob bermaydi. Agar sizga moslik kerak bo'lsa, Kontentingizni taqdim etishning boshqa variantlarini ko'rib chiqing.
Foydalanish
Bir nechta karusel
Karusel to'g'ri ishlashi uchun karuselni boshqarish uchun tashqi idishda (.karuselda) identifikatordan foydalanishni talab qiladi. Bir nechta karusel qo'shganda yoki karusel identifikatorini o'zgartirganda, tegishli boshqaruv elementlarini yangilashni unutmang.
Ushbu atributlardan foydalanish
Karusel o'rnini osongina boshqarish uchun ma'lumotlar atributlaridan foydalanish. data-slide oldingi yoki keyingi tomonidan so'ralishi mumkin, bu slayderning o'rnini joriy holatiga nisbatan o'zgartiradi. Shu bilan bir qatorda, indeksni xom karusel slaydga topshirish uchun data-slide-to-dan foydalaning data-slide-to="2" , bu indeksni aniqlovchi slaydning o'rnini 0 dan boshlab o'zgartiradi.
Data-ride="carousel" atributi sahifa yuklanganda boshlanadigan karuselni animatsiya sifatida belgilash uchun ishlatiladi. Uni bir xil karuselning (haddan tashqari) aniq JavaScript ishga tushirishi bilan birgalikda ishlatib bo'lmaydi.
JavaScript orqali
Karuselga qo'lda qo'ng'iroq qiling:
$(".karusel"). karusel()Variantlar
Parametrlar ma'lumotlar atributlari yoki JavaScript orqali o'tkazilishi mumkin. Ma'lumotlar atributlari uchun data- parametr nomini kiriting, masalan data-interval="" .
Usullari
.karusel(variantlar)
Ob'ekt variantlari bilan karuselni ishga tushiradi va elementlarni takrorlashni boshlaydi.
$(".karusel"). karusel ((interval: 2000)).karusel("tsikl")
Karusel elementlarini chapdan o'ngga aylantiradi.
.karusel("pauza")
Karuselning ob'ektlar bo'ylab aylanishini to'xtatadi.
.karusel(raqam)
Muayyan ramka uchun karusel halqalari (0-ga asoslangan, massivga o'xshash).
.karusel("oldingi")
Oldingi nuqtaga o'tish.
.karusel("keyingi")
Keyingi nuqtaga o'tadi.
Voqealar
Bootstrap karusel klassi karusel funksiyasiga osib qo'yish uchun ikkita hodisani taqdim etadi. Ikkala hodisa ham quyidagi qo'shimcha xususiyatlarga ega:
- yo'nalish: karusel siljish yo'nalishi (yoki "chap" yoki "o'ng").
- relatedTarget: DOM elementi faol element sifatida joyiga suriladi.
Barcha karusel voqealari karuselning o'ziga (ya'ni.
Elementlar-tasvirlar yoki matn slaydlari, masalan, karusel bo'ylab aylanish uchun slayd-shou komponenti.
Bu qanday ishlaydi
Karusel - bu CSS 3D konvertatsiyalari va biroz JavaScript-dan foydalangan holda yaratilgan bir qator kontentlar bo'ylab harakatlanish uchun slayd-shou. U bir qator rasmlar, matn yoki maxsus belgilar bilan ishlaydi. Shuningdek, u oldingi/keyingi boshqaruv va ko'rsatkichlarni qo'llab-quvvatlashni o'z ichiga oladi.
Misol
Karusellar slayd o'lchamlarini avtomatik ravishda normallashtirmaydi. Shunday qilib, kontentni mos ravishda o'lchash uchun qo'shimcha yordam dasturlari yoki maxsus uslublardan foydalanishingiz kerak bo'lishi mumkin. Karusellar oldingi/keyingi boshqaruv va ko'rsatkichlarni qo'llab-quvvatlasa-da, ular aniq talab qilinmaydi. O'zingizga mos keladigan tarzda qo'shing va sozlang.
Ixtiyoriy boshqaruv elementlari uchun .karuselda noyob identifikatorni o'rnatganingizga ishonch hosil qiling, ayniqsa bitta sahifada bir nechta karuseldan foydalansangiz.
Faqat slaydlar
Bu yerda faqat slaydlar bilan karusel. Brauzerda standart tasvirni hizalamaslik uchun karusel tasvirlarida .d-block va .img-fluid mavjudligiga e'tibor bering.
Boshqaruv bilan
Oldingi va keyingi boshqaruv elementlariga qo'shish:
Ko'rsatkichlar bilan
Bundan tashqari, karuselga boshqaruv elementlari bilan bir qatorda ko'rsatkichlarni ham qo'shishingiz mumkin.
Dastlabki faol element talab qilinadi
.active sinfi slaydlardan biriga qo'shilishi kerak. Aks holda, karusel ko'rinmaydi.
Sarlavhalar bilan
Har qanday .carousel-element ichidagi .carousel-caption elementi yordamida slaydlaringizga osongina taglavhalar qo'shing. Ular quyida ko'rsatilganidek, ixtiyoriy displey yordam dasturlari bilan kichikroq ko'rish oynalarida osongina yashirilishi mumkin. Biz ularni dastlab .d-none bilan yashiramiz va .d-md-block bilan o'rta o'lchamli qurilmalarga qaytaramiz.
Birinchi slayd yorlig'i
Nulla vitae elit libero, a pharetra augue mollis interdum.
Ikkinchi slayd yorlig'i
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Uchinchi slayd yorlig'i
To'g'ridan-to'g'ri commodo cursus magna, scelerisque nisl consectetur.
...
Foydalanish
Ma'lumotlar atributlari orqali
Karusel o'rnini osongina boshqarish uchun ma'lumotlar atributlaridan foydalaning. data-slide oldingi yoki keyingi kalit so'zlarni qabul qiladi, bu esa slaydni joriy holatiga nisbatan o'zgartiradi. Shu bilan bir qatorda, slayd o'rnini 0 dan boshlanadigan ma'lum bir indeksga siljituvchi karusel data-slide-to="2" ga xom slayd indeksini o'tkazish uchun data-slide-to-dan foydalaning.
Data-ride="carousel" atributi sahifa yuklangandan boshlab karuselni animatsiya sifatida belgilash uchun ishlatiladi. Uni bir xil karuselning aniq JavaScript ishga tushirishi (ortiqcha va keraksiz) bilan birgalikda ishlatib bo'lmaydi.
JavaScript orqali
Karuselga qo'lda qo'ng'iroq qiling:
$(".karusel"). karusel()Variantlar
Variantlar maʼlumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Ma'lumotlar atributlari uchun data-interval=""da bo'lgani kabi parametr nomini data- ga qo'shing.
| Ism | Turi | Standart | Tavsif |
|---|---|---|---|
| interval | raqam | 5000 | Elementni avtomatik aylantirish o'rtasidagi kechikish vaqti. Agar noto'g'ri bo'lsa, karusel avtomatik ravishda aylanmaydi. |
| klaviatura | mantiqiy | rost | Karusel klaviatura hodisalariga munosabat bildirishi kerakmi. |
| pauza | string | mantiqiy | "ko'chirish" | Agar "hover" ga o'rnatilgan bo'lsa, sichqonchaning kirish qismidagi karuselning aylanishini to'xtatib turadi va sichqoncha bargida karuselning aylanishini davom ettiradi. Agar false ga oʻrnatilgan boʻlsa, kursorni karusel ustiga olib borish uni toʻxtatib qoʻymaydi. Sensorli qurilmalarda, “hover” ga o‘rnatilganda, velosipedda harakatlanish sensorli nuqtada (foydalanuvchi karusel bilan o‘zaro aloqani tugatgandan so‘ng) avtomatik davom etishdan oldin ikki intervalgacha to‘xtatiladi. E'tibor bering, bu sichqonchaning yuqoridagi xatti-harakatlariga qo'shimcha. |
| minish | ip | yolg'on | Foydalanuvchi birinchi elementni qo'lda aylantirgandan so'ng, karuselni avtomatik ijro etadi. Agar "karusel" bo'lsa, karusel yuklanganda avtomatik o'ynaydi. |
| o'rash | mantiqiy | rost | Karusel doimiy ravishda aylanishi kerakmi yoki qattiq to'xtashlari kerakmi. |
Usullari
Asinxron usullar va o'tishlar
Barcha API usullari asinxron va boshlang a o'tish. O'tish boshlanishi bilanoq ular qo'ng'iroq qiluvchiga qaytadilar, lekin tugashidan oldin. Bundan tashqari, a bo'yicha usul chaqiruvi o'tish komponenti e'tiborga olinmaydi.
.karusel(variantlar)
Karuselni ixtiyoriy parametrlar obyekti bilan ishga tushiradi va elementlar bo‘ylab aylana boshlaydi.
$(".karusel"). karusel ((interval: 2000)).karusel("tsikl")
Karusel elementlarini chapdan o'ngga aylantiring.
.karusel("pauza")
Karuselning ob'ektlar bo'ylab aylanishini to'xtatadi.
.karusel(raqam)
Karuselni ma'lum bir freymga aylantiradi (0-ga asoslangan, massivga o'xshash). Maqsadli element ko'rsatilishidan oldin qo'ng'iroq qiluvchiga qaytadi
.karusel("oldingi")
Oldingi elementga aylanish. Oldingi element ko'rsatilishidan oldin qo'ng'iroq qiluvchiga qaytadi(ya'ni slide.bs.carousel hodisasi sodir bo'lishidan oldin).
.karusel("keyingi")
Keyingi elementga o'tish. Keyingi element ko'rsatilgunga qadar qo'ng'iroq qiluvchiga qaytadi(ya'ni slide.bs.carousel hodisasi sodir bo'lishidan oldin).
.karusel("tashlash")
Elementning karuselini yo'q qiladi.
Voqealar
Bootstrap-ning karusel klassi karusel funksiyasiga ulanish uchun ikkita hodisani ochib beradi. Ikkala hodisa ham quyidagi qo'shimcha xususiyatlarga ega:
- yo'nalish: karusel siljish yo'nalishi ("chap" yoki "o'ng").
- relatedTarget: DOM elementi faol element sifatida joyiga o'rnatiladi.
- dan: Joriy element indeksi
- kimga: keyingi elementning indeksi
Barcha karusel hodisalari karuselning o'ziga (ya'ni
| Tadbir turi | Tavsif |
|---|---|
| slayd.bs.karusel | Ushbu hodisa slayd namunasi usuli chaqirilganda darhol ishga tushadi. |
| slid.bs.carusel | Ushbu hodisa karusel slaydga o'tishni tugatgandan so'ng o'chiriladi. |
Velosiped elementlari uchun slayd-shou komponenti - tasvir karuseli yoki matnli slaydlar.
U qanday ishlaydi
Carousel - bu CSS 3D transformatsiyalari va biroz JS yordamida yaratilgan bir qator kontentni ko'rsatish uchun slayd-shou. U matn, tasvirlar yoki oddiy belgilar bilan ishlaydi. Shuningdek, u "keyingi/oldingi" tugmalarini qo'llab-quvvatlaydi.
Iltimos, bilingki, ichki o'rnatilgan karusellar qo'llab-quvvatlanmaydi va umuman karusellar "mavjudlik standartlari" bo'yicha juda istalmagan.
Xulosa qilib aytadigan bo'lsak, agar siz BS4 karusellaridan foydalanayotgan bo'lsangiz, buning uchun util.js kiritilishi kerak.
Misol
Karusel slaydlaringiz mazmunini avtomatik ravishda o'zgartirmaydi. Shuning uchun, ularning mazmunini kerakli hajmga o'lchash uchun sizga qo'shimcha yordam dasturlari kerak bo'lishi mumkin. Karusellar oldingi/keyingi tugmalarni qo'llab-quvvatlasa, ularni aniq qo'shish shart emas. Ularni o'zingiz qo'shing va sozlang.
Class.active slaydlardan biriga qo'shiladi, aks holda karusel ko'rinmaydi. Bundan tashqari, boshqaruv elementlarini amalga oshirish uchun .carousel sinf elementiga noyob identifikatorni o'rnatishingiz kerak, ayniqsa sizda bir sahifada ko'plab karusellar mavjud bo'lsa. Boshqaruv va ko'rsatkichlar ma'lumotlar maqsadli atributiga ega bo'lishi kerak (yoki href for ), bu sinf.karusel elementining identifikatoriga mos keladi.
Faqat slaydlar
Bu erda faqat slaydlar bilan karusel misoli keltirilgan. Karusel tasvirlari uchun standart brauzer hizalanishini bekor qiluvchi .d-block va .w-100 sinflari mavjudligiga e'tibor bering.
To'ldiruvchi Birinchi slayd
To'ldiruvchi Ikkinchi slayd
To'ldiruvchi uchinchi slayd
Boshqaruv bilan
Oldingi/keyingi tugmalarni qo'shadi:
Ko'rsatkichlar bilan
Bundan tashqari, karuselga boshqaruv elementlari bilan bir qatorda ko'rsatkichlarni ham qo'shishingiz mumkin.
Dastlabki faol elementni talab qiladi
Slaydlardan biriga .active sinfini qo'shishingiz kerak, aks holda karusel ko'rinmaydi.
Yozuvlar bilan
Har qanday .carousel element elementiga .carousel-caption elementini qo‘shish orqali slaydlaringizga taglavhalar qo‘shing. Taglavhalarni kichikroq qurilmalarda displey yordam dasturlari yordamida osongina yashirish mumkin. Ular dastlab .d-none klassi yordamida yashiriladi va .d-md-block sinfidan foydalangan holda o'rta qurilmalarda yana ko'rsatiladi.
To'ldiruvchi Birinchi slayd
Birinchi slayd yorlig'i
Nulla vitae elit libero, a pharetra augue mollis interdum.
To'ldiruvchi Ikkinchi slayd
Ikkinchi slayd yorlig'i
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
To'ldiruvchi uchinchi slayd
Uchinchi slayd yorlig'i
To'g'ridan-to'g'ri commodo cursus magna, scelerisque nisl consectetur.
Birinchi slayd yorlig'i
Nulla vitae elit libero, a pharetra augue mollis interdum.
Ikkinchi slayd yorlig'i
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Uchinchi slayd yorlig'i
To'g'ridan-to'g'ri commodo cursus magna, scelerisque nisl consectetur.
Yelimlash
Slaydlaringizni jonlantirish va keyingi slaydga oʻtish uchun karuselingizga .carousel-fade qoʻshing.
moslashtirilgan oraliq.karusel-element
Keyingi elementga avtomatik aylanish o'rtasidagi kechikish vaqtini o'zgartirish uchun .carousel-elementga data-interval="" qo'shing.
Foydalanish
Atributlar orqali
Data-slide atributi oldingi yoki keyingi qiymatlarni oladi, ular slaydni joriy holatiga nisbatan o'zgartiradi. Yoki indeksli slaydga borish uchun data-slide-to-dan foydalaning, masalan 2: data-slide-to="2" , slayd indekslari 0 dan boshlanadi.
data-ride="carousel" atributi karusel animatsiyasini yaratish uchun ishlatiladi. Uni JavaScript orqali aniq karusel ishga tushirish bilan birlashtirib bo'lmaydi.
JavaScript orqali
Karuselga qo'lda qo'ng'iroq qiling:
$(".karusel"). karusel()Variantlar
Parametrlar atributlar yoki JavaScript orqali uzatilishi mumkin. Atributlardan foydalanish uchun data- ga parametr nomini qo'shing, masalan: data-interval="".
| Ism | Turi | Standart | Tavsif |
|---|---|---|---|
| interval | raqam | 5000 | Avtomatik slayd o'zgarishlari orasidagi kechikish vaqti. Agar noto'g'ri bo'lsa, karusel slaydlarni avtomatik ravishda o'zgartirmaydi. |
| klaviatura | mantiqiy | rost | Karusel klaviatura hodisalariga javob beradimi? |
| pauza | string | mantiqiy | "ko'chirish" |
Agar "hover" o'rnatilgan bo'lsa, slaydni o'zgartirish sichqonchani kiritish orqali sekinlashadi va o'zgartirish sichqonchani qo'yish bilan boshlanadi. Agar noto'g'ri bo'lsa, kursorni karusel ustiga olib borish slaydlarning o'zgarishini to'xtata olmaydi. Tegish orqali faollashtirilgan qurilmalar: “hover” – teginish vaqtida pauza qilish (foydalanuvchi karusel bilan o‘zaro aloqani tugatgandan keyin) ikki oraliq uchun, keyin slaydlarni yana o‘zgartiring. E'tibor bering, bu xatti-harakatlar yuqorida tavsiflangan sichqonchaning xatti-harakatlariga qo'shimchadir. |
| minish | chiziq | yolg'on | Foydalanuvchi slaydni birinchi qo'lda o'zgartirgandan so'ng, karusel slaydlarini avtomatik ravishda o'zgartirish. Agar karusel bo'lsa, yuklangandan keyin avtomatik o'zgartirish yoqiladi. |
| o'rash | mantiqiy | rost | Karusel silliq yoki diskret o'zgarishi kerakmi? |
| teginish | mantiqiy | rost | Karusel sensorli qurilmalarda chap/o'ng shovqinni qo'llab-quvvatlashi kerak. |
Usullari
Asinxron usullar va o'tishlar
Barcha API usullari asinxron va ishga tushirish o'tish. Ular o'tish boshlanganda ularni chaqirgan funktsiyaga qaytariladi, lekin oxirigacha. Bundan tashqari, komponentda usulni chaqirish, o'tishni amalga oshirish e'tiborga olinmaydi.
.karusel(variantlar)
Belgilangan parametrlar bilan karusel ob'ektini ishga tushiradi va slaydlarni o'zgartirishni boshlaydi.
$(".karusel"). karusel ((interval: 2000)).karusel("tsikl")
Karusel slaydlarini chapdan o'ngga o'zgartiradi.
.karusel("pauza")
Slayd o'zgarishini to'xtatadi.
.karusel(raqam)
Slaydlarni ma'lum bir nuqtaga aylantiradi (0-ga asoslangan, qatorlarga o'xshash).
.karusel("oldingi")
Oldingi slaydga o'tadi. Maqsadli element ko'rsatilishidan oldin funktsiya chaqiruvining qiymatini qaytaradi(ya'ni slid.bs.carousel hodisasi yonishidan oldin).
.karusel("keyingi")
Keyingi slaydga o'ting. Maqsadli element ko'rsatilishidan oldin funktsiya chaqiruvining qiymatini qaytaradi(ya'ni slid.bs.carousel hodisasi yonishidan oldin).
.karusel("tashlash")
Elementning karuselini yo'q qiladi.
Voqealar
Bootstrap-dagi karuselda funksionallikni qo'llash uchun 2 ta hodisa mavjud. Ikkala hodisa ham quyidagi qo'shimcha xususiyatlarga ega:
- yo'nalish: Slaydlar harakatlanadigan yo'nalish ("chap" yoki "o'ng").
- relatedTarget: "aylantiriladigan" slaydning holatiga o'tadigan DOM elementi.
- dan: Joriy slayd indeksi
- kimga: Keyingi slayd indeksi
Barcha karusel hodisalari to'g'ridan-to'g'ri karuselga yuboriladi (ya'ni.
O'tish muddatini o'zgartirish
Transition.carousel-elementning davomiyligi kompilyatsiyadan oldin Sass $carousel-transition o'zgaruvchisida yoki oddiy CSS-da (agar kompilyatsiya qilingan CSS ishlatilsa) o'zgartirilishi mumkin. Agar bir nechta oʻtish ishlatilsa, avval transformatsiya oʻtishini koʻrsating (masalan: oʻtish: transform 2s oson, shaffoflik .5s osonlik).
Twitter Bootstrap 3 kontentni boshqarish tizimlarini ishlab chiqish va saqlash uchun eng yaxshi CSS ramkalaridan biridir. Bootstrap yordamida siz Twitter Bootstrap grid layout tizimidan foydalanib osongina bloglar yoki portfellar yaratishingiz mumkin. Ko'pgina CMS tizimlarining markazida biz "Slayder" (karusel) deb nomlangan asosiy komponentga ega bo'lamiz, bu asosan rasmlarning avtomatik ketma-ket ko'rinishidir, lekin u eng so'nggi tugallangan loyihalarni, mijozlaringizning sharhlarini, tavsiflarni ham ko'rsatishi mumkin. maxsus takliflar, yangiliklarga havolalar yoki so'nggi maqolalar blogdan. Ushbu maqolada biz Twitter Bootstrap 3 da Carousel komponenti yordamida slayderni qanday yaratishni ko'rib chiqamiz.
Twitter Bootstrap 3 Carousel komponentiga kirish
Karusel komponenti uchun belgi quyidagicha ko'rinadi:
>
...
>
>
...
>
>
>
>
>
>
Yuqoridagi koddan biz Bootstrap 3 slayderi bir necha qismlarga bo'linganligini ko'rishimiz mumkin:
- Yo'l ko'rsatkichlari
- Slayder tarkibi
- Boshqaruv
Elementni qayta ko'rsatish uchun div slayderda biz sinf nomlarini qo'shamiz: karusel Va slayd. Sinf karusel"karusel" effektini yaratadi, ya'ni doiradagi slaydlarni o'zgartiradi. Sinf slayd o'ng yoki chap tomondan surma animatsiyani qo'shadi. Ko'rsatkichlar slayderning pastki qismidagi kichik doiralar bo'lib, ular slaydning joriy holatini va slaydlar sonini aniqlaydi; Indekslar tartiblangan ro'yxat yordamida yaratiladi.
>
Buyurtma qilingan ro'yxat sinfga ega karusel ko'rsatkichlari, bu bola elementlarini kichik doiralarga aylantiradi. Har bir element li atributga ega bo‘lishi kerak ma'lumotlar maqsadi ota-konteynerning identifikatori bilan. Bundan tashqari, atributga ega bo'lishi kerak ma'lumotlarga o'tish noyob raqamli qiymatga ega, ma'lum bir slaydga murojaat qilish uchun qiymatlar "0" dan boshlanishi kerak.
...
>
>
...
>
Har bir element sinfga ega element ikkita kichik bo'limga ega: tasvir Va karusel sarlavhasi. Rasm slayd uchun fon sifatida ishlatiladi. Sinf bilan element karusel sarlavhasi tasvir ustida joylashgan va slayd sarlavhasi sifatida ishlatiladi. Ichkarida karusel sarlavhasi, qo'shishimiz mumkin
yoki teglar, hatto ikkalasi ham.
Boshqarish slaydlarni qo'lda o'zgartirish uchun ishlatiladigan chap va o'ng strelkalar bilan ta'minlanadi.
"glifikon glifikon-chevron-chap"> >
>
"glifikon glifikon-chevron-o'ng"> >
>
>
Ikki element bo'lishi kerak: har bir yo'nalish uchun bittadan. Birinchi element bo'ladi oraliq sinflar bilan element glifikon glifikon-chevron-chap chap o'q belgisi va ikkinchi element sinflarga ega bo'ladi glifikon glifikon-chevron-o'ng, bu o'ng strelka. Bootstrap-da biz piktogrammalarni ko'rsatish uchun tasvirlar o'rniga shriftlardan foydalanishimiz mumkin.
Bo'ldi shu! Siz veb-saytingiz uchun slayderni muvaffaqiyatli yaratdingiz. Bundan tashqari, siz JavaScript kodining bir qatorini yozmadingiz, lekin bootstrap.js siz uchun hamma narsani qildi.
Karusel sozlamalari
Slayderni qo'shimcha sozlash uchun siz bir nechta atributlarni qo'shishingiz mumkin ma'lumotlar-* ota-karusel konteyneri uchun.
- "ma'lumotlar oralig'i" slaydlarni almashtirish orasidagi vaqt oralig'ini belgilash uchun ishlatiladi. U raqamli qiymatni oladi va raqam millisekundlarda bo'lishi kerak.
- "ma'lumotlar pauzasi" pauza hodisasi qachon boshlanishini aniqlash uchun ishlatiladi. Masalan, qachon " hoved", sichqoncha slayder ustida turganda slaydni almashtirish to'xtaydi.
- "ma'lumotlarni o'rash" bu mantiqiy atribut boʻlib, agar slaydlar roʻyxati oxiriga yetsa, slaydni almashtirishni davom ettirish yoki yoʻqligini belgilash imkonini beradi.
jQuery yordamida sozlash
Agar siz jQuery va data-* atributlaridan foydalanmoqchi bo'lsangiz, Bootstrap JavaScript yordamida ishga tushirishga ruxsat beradi. Buning uchun quyidagi kodni yozishingiz mumkin:
$(".karusel") .karusel ();
Karusel sozlamalari parametrlar yordamida o'rnatilishi mumkin. Masalan:
$(".karusel") .karusel ((
interval: 2000
pauza: "hover" ,
o'rash: rost
}
)
;
Quyidagi kod yordamida slayder hodisalarini qo'lda ishga tushirishingiz mumkin:
- .karusel("pauza") // pauza
- .carousel("sikl") // slaydlarni yoqish
- .carousel(3) // to'rtinchi slaydni ko'rsatish
- .carousel("oldingi") // oldingi slaydni ko'rsatish
- .carousel("keyingi") // keyingi slaydni ko'rsatish
Slayderning normal ishlashini boshqarish uchun yuqoridagi usullarni istalgan JavaScript kodidan chaqirish mumkin. Agar standart o'qlar o'rniga o'z tugmalarimni ko'rsatmoqchi bo'lsam, oldingi va keyingi usullarni juda foydali deb bilaman. Ayniqsa, ular karusel tartibidan tashqarida bo'lsa.
Xulosa
Ushbu maqola JavaScript-da minglab qator kodlarni yozmasdan slayder yaratishni o'rganmoqchi bo'lganlar uchun foydali bo'lishi kerak. Shubhasiz, bu rivojlanish tezligini oshiradi. Eng muhimi, bu yechim o‘zaro brauzerlar bilan mos keladi, shuning uchun eski brauzerlarda ishlashi uchun sochingizni yirtishingiz shart emas.
Agar sizda biron bir savol bo'lsa, bizdan foydalanishni tavsiya etamiz
Elementlar-tasvirlar yoki matn slaydlari, masalan, karusel bo'ylab aylanish uchun slayd-shou komponenti.
Bu qanday ishlaydi
Karusel - bu CSS 3D konvertatsiyalari va biroz JavaScript-dan foydalangan holda yaratilgan bir qator kontentlar bo'ylab harakatlanish uchun slayd-shou. U bir qator rasmlar, matn yoki maxsus belgilar bilan ishlaydi. Shuningdek, u oldingi/keyingi boshqaruv va ko'rsatkichlarni qo'llab-quvvatlashni o'z ichiga oladi.
Esda tutingki, ichki oʻrnatilgan karusellar qoʻllab-quvvatlanmaydi va karusellar odatda maxsus imkoniyatlar standartlariga mos kelmaydi.
Misol
Karusellar slayd o'lchamlarini avtomatik ravishda normallashtirmaydi. Shunday qilib, kontentni mos ravishda o'lchash uchun qo'shimcha yordam dasturlari yoki maxsus uslublardan foydalanishingiz kerak bo'lishi mumkin. Karusellar oldingi/keyingi boshqaruv va ko'rsatkichlarni qo'llab-quvvatlasa-da, ular aniq talab qilinmaydi. O'zingizga mos keladigan tarzda qo'shing va sozlang.
.active sinfi slaydlardan biriga qo'shilishi kerak aks holda karusel ko'rinmaydi. Bundan tashqari, ixtiyoriy boshqaruv elementlari uchun .karuselda noyob identifikatorni o'rnatishni unutmang, ayniqsa bitta sahifada bir nechta karuseldan foydalansangiz. Boshqaruv va indikator elementlari .karusel elementining identifikatoriga mos keladigan maʼlumotlar maqsadli atributiga (yoki havolalar uchun href) ega boʻlishi kerak.
Faqat slaydlar
Bu yerda faqat slaydlar bilan karusel. Brauzerda standart tasvirni hizalamaslik uchun karusel tasvirlarida .d-block va .w-100 mavjudligiga e'tibor bering.
To'ldiruvchi Birinchi slayd
To'ldiruvchi Ikkinchi slayd
To'ldiruvchi uchinchi slayd
Boshqaruv bilan
Oldingi va keyingi boshqaruv elementlariga qo'shish:
Ko'rsatkichlar bilan
Bundan tashqari, karuselga boshqaruv elementlari bilan bir qatorda ko'rsatkichlarni ham qo'shishingiz mumkin.
Sarlavhalar bilan
Har qanday .carousel-element ichidagi .carousel-caption elementi yordamida slaydlaringizga osongina taglavhalar qo'shing. Ular quyida ko'rsatilganidek, ixtiyoriy displey yordam dasturlari bilan kichikroq ko'rish oynalarida osongina yashirilishi mumkin. Biz ularni dastlab .d-none bilan yashiramiz va .d-md-block bilan o'rta o'lchamli qurilmalarga qaytaramiz.
To'ldiruvchi Birinchi slayd
Birinchi slayd yorlig'i
Nulla vitae elit libero, a pharetra augue mollis interdum.
To'ldiruvchi Ikkinchi slayd
Ikkinchi slayd yorlig'i
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
To'ldiruvchi uchinchi slayd
Uchinchi slayd yorlig'i
To'g'ridan-to'g'ri commodo cursus magna, scelerisque nisl consectetur.
Birinchi slayd yorlig'i
Nulla vitae elit libero, a pharetra augue mollis interdum.
Ikkinchi slayd yorlig'i
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Uchinchi slayd yorlig'i
To'g'ridan-to'g'ri commodo cursus magna, scelerisque nisl consectetur.
Crossfade
Slaydlarni slayd o‘rniga xira o‘tish bilan jonlantirish uchun karuselingizga .carousel-fade qo‘shing.
Individual .karusel-modda oralig'i
Keyingi elementga avtomatik oʻtish oʻrtasidagi kechikish vaqtini oʻzgartirish uchun .carousel-elementga data-interval="" qoʻshing.
Foydalanish
Ma'lumotlar atributlari orqali
Karusel o'rnini osongina boshqarish uchun ma'lumotlar atributlaridan foydalaning. data-slide oldingi yoki keyingi kalit so'zlarni qabul qiladi, bu esa slaydni joriy holatiga nisbatan o'zgartiradi. Shu bilan bir qatorda, slayd o'rnini 0 dan boshlanadigan ma'lum bir indeksga siljituvchi karusel data-slide-to="2" ga xom slayd indeksini o'tkazish uchun data-slide-to-dan foydalaning.
Data-ride="carousel" atributi sahifa yuklangandan boshlab karuselni animatsiya sifatida belgilash uchun ishlatiladi. Agar siz karuselingizni ishga tushirish uchun data-ride="carousel" dan foydalanmasangiz, uni o'zingiz ishga tushirishingiz kerak. Uni bir xil karuselning aniq JavaScript ishga tushirishi (ortiqcha va keraksiz) bilan birgalikda ishlatib bo'lmaydi.
JavaScript orqali
Karuselga qo'lda qo'ng'iroq qiling:
$(".karusel"). karusel()Variantlar
Variantlar maʼlumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Ma'lumotlar atributlari uchun data-interval=""da bo'lgani kabi parametr nomini data- ga qo'shing.
| Ism | Turi | Standart | Tavsif |
|---|---|---|---|
| interval | raqam | 5000 | Elementni avtomatik aylantirish o'rtasidagi kechikish vaqti. Agar noto'g'ri bo'lsa, karusel avtomatik ravishda aylanmaydi. |
| klaviatura | mantiqiy | rost | Karusel klaviatura hodisalariga munosabat bildirishi kerakmi. |
| pauza | string | mantiqiy | "ko'chirish" | Agar "hover" ga o'rnatilgan bo'lsa, sichqonchaning kirish qismidagi karuselning aylanishini to'xtatib turadi va sichqoncha bargida karuselning aylanishini davom ettiradi. Agar false ga oʻrnatilgan boʻlsa, kursorni karusel ustiga olib borish uni toʻxtatib qoʻymaydi. Sensorli qurilmalarda, “hover” ga o‘rnatilganda, velosipedda harakatlanish sensorli nuqtada (foydalanuvchi karusel bilan o‘zaro aloqani tugatgandan so‘ng) avtomatik davom etishdan oldin ikki intervalgacha to‘xtatiladi. E'tibor bering, bu sichqonchaning yuqoridagi xatti-harakatlariga qo'shimcha. |
| minish | ip | yolg'on | Foydalanuvchi birinchi elementni qo'lda aylantirgandan so'ng, karuselni avtomatik ijro etadi. Agar "karusel" bo'lsa, karusel yuklanganda avtomatik o'ynaydi. |
| o'rash | mantiqiy | rost | Karusel doimiy ravishda aylanishi kerakmi yoki qattiq to'xtashlari kerakmi. |
| teginish | mantiqiy | rost | Karusel sensorli ekranli qurilmalarda chap/o‘ngga surish harakatlarini qo‘llab-quvvatlashi kerakmi. |
Usullari
Asinxron usullar va o'tishlar
Barcha API usullari asinxron va boshlang a o'tish. O'tish boshlanishi bilanoq ular qo'ng'iroq qiluvchiga qaytadilar, lekin tugashidan oldin. Bundan tashqari, a bo'yicha usul chaqiruvi o'tish komponenti e'tiborga olinmaydi.
.karusel(variantlar)
Karuselni ixtiyoriy parametrlar obyekti bilan ishga tushiradi va elementlar bo‘ylab aylana boshlaydi.
$(".karusel"). karusel ((interval: 2000)).karusel("tsikl")
Karusel elementlarini chapdan o'ngga aylantiring.
.karusel("pauza")
Karuselning ob'ektlar bo'ylab aylanishini to'xtatadi.
.karusel(raqam)
Karuselni ma'lum bir freymga aylantiradi (0-ga asoslangan, massivga o'xshash). Maqsadli element ko'rsatilishidan oldin qo'ng'iroq qiluvchiga qaytadi
.karusel("oldingi")
Oldingi elementga aylanish. Oldingi element ko'rsatilishidan oldin qo'ng'iroq qiluvchiga qaytadi(ya'ni slide.bs.carousel hodisasi sodir bo'lishidan oldin).
.karusel("keyingi")
Keyingi elementga o'tish. Keyingi element ko'rsatilgunga qadar qo'ng'iroq qiluvchiga qaytadi(ya'ni slide.bs.carousel hodisasi sodir bo'lishidan oldin).
.karusel("tashlash")
Elementning karuselini yo'q qiladi.
Voqealar
Bootstrap-ning karusel klassi karusel funksiyasiga ulanish uchun ikkita hodisani ochib beradi. Ikkala hodisa ham quyidagi qo'shimcha xususiyatlarga ega:
- yo'nalish: karusel siljish yo'nalishi ("chap" yoki "o'ng").
- relatedTarget: DOM elementi faol element sifatida joyiga o'rnatiladi.
- dan: Joriy element indeksi
- kimga: keyingi elementning indeksi
Barcha karusel hodisalari karuselning o'ziga (ya'ni
| Tadbir turi | Tavsif |
|---|---|
| slayd.bs.karusel | Ushbu hodisa slayd namunasi usuli chaqirilganda darhol ishga tushadi. |
| slid.bs.carusel | Ushbu hodisa karusel slaydga o'tishni tugatgandan so'ng o'chiriladi. |
O'tish muddatini o'zgartiring
Agar siz kompilyatsiya qilingan CSS-dan foydalansangiz, kompilyatsiya qilishdan oldin .carousel-item o'tish muddatini $carousel-transition Sass o'zgaruvchisi yoki maxsus uslublar bilan o'zgartirish mumkin. Agar bir nechta oʻtish qoʻllanilsa, avval transformatsiyaga oʻtish aniqlanganligiga ishonch hosil qiling (masalan, oʻtish: transform 2s qulayligi, shaffoflik .5s qulayligi).
Kalit so'zlarni kiriting.