Dezinseksiya
Bootstrap yordamida slayder yaratish. Qanday qilib o'zingizning yuklash slayderingizni bir necha oson qadamda yaratishingiz mumkin bootstrap 3 uchun sezgir karusel

Bootstrap yordamida slayder yaratish. Qanday qilib o'zingizning yuklash slayderingizni bir necha oson qadamda yaratishingiz mumkin bootstrap 3 uchun sezgir karusel

Twitter Bootstrap 3 kontentni boshqarish tizimlarini ishlab chiqish va saqlash uchun eng yaxshi CSS ramkalaridan biridir. Bootstrap yordamida siz Twitter Bootstrap grid tizimi (grid layout) yordamida osongina bloglar yoki portfellar yaratishingiz mumkin. Ko'pgina CMS tizimlarining markazida bizda odatda "Slider" (karusel) deb nomlangan asosiy komponent mavjud bo'lib, u asosan rasmlarning avtomatik ketma-ket ko'rinishidir, lekin u shuningdek, eng so'nggi tugallangan loyihalarni, mijozlaringizning sharhlarini, maxsus tavsiflarni ko'rsatishi mumkin. takliflar, yangiliklarga havolalar yoki blogdagi so'nggi maqolalar. Ushbu maqolada biz Twitter Bootstrap 3 da Carousel komponenti yordamida slayderni qanday yaratishni ko'rib chiqamiz.

Bootstrap 3 Carousel Twitter komponentiga kirish

Karusel komponenti uchun belgi quyidagicha ko'rinadi:

>
>

...
>
>
...
>

>
>

>
>
>

Yuqoridagi koddan biz Bootstrap 3 slayderi bir necha qismlarga bo'linganligini ko'rishimiz mumkin:

Ko'rsatkichlar
Slayder tarkibi
Boshqaruv

Elementni aylantirish uchun div slayderda biz sinf nomlarini qo'shamiz: karusel Va slayd. Sinf karusel"karusel" effektini yaratadi, ya'ni slaydlarni doira ichida o'zgartiradi. Sinf slayd o'ng yoki chap tomondan surma animatsiya qo'shadi. Ko'rsatkichlar slayderning pastki qismidagi kichik doiralar bo'lib, ular slaydning joriy holatini va slaydlar sonini ko'rsatadi. Ko'rsatkichlar tartiblangan ro'yxat yordamida yaratiladi.

>
>

Buyurtma qilingan ro'yxat sinfga ega karusel ko'rsatkichlari, bu bola elementlarini kichik doiralarga aylantiradi. Har bir element li atributiga ega bo‘lishi kerak ma'lumotlar maqsadi ota-konteyner 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 chap va o'ng strelkalar bilan amalga oshiriladi, ular slaydlarni qo'lda o'zgartirish uchun ishlatiladi.

"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, bu 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.

Ana xolos! Siz 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-* karuselning asosiy 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 ishga tushirilishini aniqlash uchun ishlatiladi. Masalan, qachon "ga teng bo'lsa. hoved", sichqoncha slayder ustida turganda slaydni almashtirish to'xtaydi.
"ma'lumotlarni o'rash" mantiqiy atribut boʻlib, slaydlar roʻyxatining oxirigacha yetib borsa, slaydlarni almashtirishni davom ettirishni sozlash imkonini beradi.

jQuery bilan moslashtirish

Agar siz jQuery va data-* atributlaridan foydalanmoqchi bo'lsangiz, Bootstrap JavaScript bilan ishga tushirishga ruxsat beradi. Buning uchun quyidagi kodni yozishingiz mumkin:

$(".karusel" ) .karusel() ;

Karusel sozlamalari parametrlar yordamida o'rnatilishi mumkin. Masalan:

$(".karusel")
interval: 2000
pauza: "hover" ,
o'rash: rost
} ) ;

Shuningdek, siz quyidagi kod yordamida slayder hodisalarini qo'lda ishga tushirishingiz mumkin:

.karusel("pauza") // pauza
.carousel("cycle") // 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 minglab qator JavaScript kodlarini yozmasdan slayder yaratishni o'rganmoqchi bo'lganlar uchun foydali bo'lishi kerak. Shubhasiz, bu rivojlanish tezligini oshiradi. Eng muhimi, bu yechim kross-brauzerdir, shuning uchun eski brauzerlarda ishlashi uchun sochingizni yirtishingiz shart emas.

Agar sizda biron bir savol bo'lsa, bizdan foydalaning

Velosiped elementlari uchun slayd-shou komponenti - tasvir karuseli yoki matnli slaydlar.

U qanday ishlaydi

Carousel - bu CSS 3D konvertatsiyalari va ba'zi JS-ga asoslangan bir qator kontentni ko'rsatish uchun slayd-shou. U matn, tasvirlar yoki oddiy belgilar bilan ishlaydi. Bundan tashqari, keyingi/oldingi tugmalarni qo'llab-quvvatlaydi.

Misol

Karusel slayd tarkibining hajmini avtomatik ravishda normallashtirmaydi. Shuning uchun, ularning mazmunini to'g'ri hajmda qilish 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.

Moslashuvchanlik uchun .carousel sinfiga noyob identifikator bering, ayniqsa sahifada ko'p karusellardan foydalansangiz.

Faqat slaydlar

Bu erda faqat slaydlar bilan karusel misoli keltirilgan. Karusel tasvirlarida .d-block va .img-fluid sinflarining mavjudligiga e'tibor bering - ularning maqsadi brauzerning tasvirni moslashtirishni sukut bo'yicha oldini olishdir.

Boshqaruv bilan

Oldingi/keyingi tugmalarni qo'shadi:

Ko'rsatkichlar bilan

Bundan tashqari, karuselga boshqaruv elementlari bilan birga indikatorlarni ham qo'shishingiz mumkin.

Dastlabki faol elementni talab qiladi

.active sinfi slaydlardan biriga qo'shilishi kerak, aks holda karusel ko'rinmaydi.

Yozuvlar bilan

.carousel-item sinfining istalgan karusel elementiga .carousel-caption sinf elementini qo‘shish orqali slaydlaringizga taglavhalar qo‘shing. Yorliqlarni displey yordam dasturlari yordamida kichikroq qurilmalarda yashirish oson. Ular dastlab .d-none klassi bilan yashiringan va ularni .d-md-block klassi bilan o'rtacha qurilmalarda yana ko'rsatish.

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.

"karusel sarlavhasi d-none d-md-blok">

...

Foydalanish

Atributlar orqali

Data-slide atributi oldingi yoki keyingi qiymatlarni oladi, ular slaydni joriy holatiga nisbatan o'zgartiradi. Yoki indeksdagi slaydga oʻtish 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	Avvalboshdan	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	hoved	Agar "hover" o'rnatilgan bo'lsa, slaydni o'zgartirish sichqonchani kiritish orqali sekinlashadi va o'zgartirish sichqonchani qo'yish orqali boshlanadi. Agar noto'g'ri bo'lsa, kursorni karusel ustiga olib borish slaydlarning o'zgarishini to'xtata olmaydi. Sensor bilan faollashtirilgan qurilmalar: "hover" - sensorli nuqtada pauza qilish (foydalanuvchi karusel bilan o'zaro aloqani tugatgandan so'ng) ikki intervalgacha, keyin slaydlarni yana o'zgartiring. E'tibor bering, bu xatti-harakatlar yuqorida tavsiflangan sichqonchaning xatti-harakatlariga qo'shimchadir.
minish	chiziq	yolg'on	Foydalanuvchi tomonidan birinchi slaydni qo'lda o'zgartirgandan so'ng, karusel slaydlarini avtomatik o'zgartirish. Agar karusel - yuklangandan keyin avtomatik almashtirish yoqilgan bo'lsa.
o'rash	mantiqiy	rost	Karusel silliq yoki diskret o'zgarishi kerakmi.

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 variantlar bilan karusel ob'ektini ishga tushiradi va slaydga o'tishni boshlaydi.

$(".karusel"). karusel (( interval : 2000 ))

.karusel("tsikl")

Karusel slaydlarini chapdan o'ngga o'zgartiradi.

.karusel("pauza")

Slayd o'tishni to'xtatadi.

.karusel(raqam)

Slaydlarni ma'lum bir nuqtagacha aylantiradi (0-ga asoslangan, qatorlarga o'xshash).

.karusel("oldingi")

Oldingi slaydga o'tadi. "Maqsad" elementi ko'rsatilishidan oldin funktsiya chaqiruvining qiymatini qaytaradi(ya'ni slid.bs.carousel hodisasi yonishidan oldin).

.karusel("keyingi")

Keyingi slaydga. "Maqsad" elementi ko'rsatilishidan oldin funktsiya chaqiruvining qiymatini qaytaradi(ya'ni slid.bs.carousel hodisasi yonishidan oldin).

.karusel("tashlash")

Buyumning 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").
bog'liqTarget: "siltiladigan" slayd holatiga o'tadigan DOM elementi.
dan: Joriy slaydning indeksi
Kimga: keyingi slaydning indeksi

Barcha karusel hodisalari to'g'ridan-to'g'ri karuselda (ya'ni

$("#myCarousel" ). yoqilgan ("slide.bs.carousel" , funktsiya () ( // biror narsa qilish ... ))

Bootstrap ramkasining elementlaridan yangi narsalarni o'rganmoqchi bo'lgan barchaga xayrli kun. Bugungi mavzu Bootstrap Carousel slayderidir. Bu deyarli har bir veb-saytda mavjud bo'lgan mashhur element.

Shuning uchun, men sizga Carousel slayderini qanday yaratishni, buning uchun qanday o'rnatilgan vositalar kerakligini, parametrlarni qanday sozlashni aytib beraman va maqolaning oxirida men aniq bir misolni amalga oshirishni ko'rsataman. Va endi biznesga tushing!

Bootstrap Carousel plagin vositalari haqida hamma narsa

Karusel fotogalereyasi yangi takliflar, mahsulotlar, joriy aktsiyalar ro'yxati, qulay portfelni ko'rish va hokazolarni taqdim etish uchun ishlatiladi. Shuning uchun, bugungi kunda ushbu plagin ostida ishlash imkoniyatiga ega bo'lish muhimdir rasmiy nomi Bootstrap Carousel plagini.

Darhol ta'kidlash kerakki, tasvirlangan element Internet Explorer 9 va undan oldingi versiyalarda to'g'ri qo'llab-quvvatlanmaydi. Biroq, u juda yaxshi ishlaydi (WordPress, Joomla! va boshqa dvigatellar uchun ramkani ulash juda oddiy).

Barcha parametrlar bilan osongina ishlash va slayderni tezda sozlash uchun siz Bootstrap 3 ning asosiy o'rnatilgan sinflarini o'rganishingiz kerak.

Sinf	maqsad
karusel	Karusel slayderini o'zi yaratadi.
slayd	Slaydlar o'rtasida almashish paytida CSS bilan animatsiya va o'tish effektlarini qo'shadi. Sinf ixtiyoriy.
karusel ko'rsatkichlari	Ta’bir joiz bo‘lsa, har bir tasvirning pastki qismida kichik nuqtalar ko‘rinishidagi boshqaruv paneli qo‘shiladi, uning yordamida istalgan tasvirga tezda o‘tish mumkin. Sinf ixtiyoriy.
karusel-ichki	Slaydlarning o'zini galereyaga qo'shadi.
karusel sarlavhasi	Grafik fayllarni imzolash uchun javobgar. Istagancha kiritilishi mumkin.
element	Har bir slayd uchun tarkib to'plamini belgilaydi.
O'ng/chap karusel-nazorati	Kadrlar o'rtasida almashish uchun nomga ko'ra o'ng va chap tugmalarni qo'shadi.

Bundan tashqari, bunday galereyalar tartibining boshqa xususiyatlarini bilishga arziydi.

Yangi boshlanuvchilar uchun Karusel blokini yaratish deklaratsiyani talab qiladi id="myCarousel" ikkinchisining to'g'ri ishlashi uchun.

Xuddi shu divda siz atributni ro'yxatdan o'tkazishingiz kerak data-ride = "karusel", bu sahifa yuklanishi bilanoq animatsiya yuklanishi kerakligini bildiradi.

Endi ko'rsatkichlarga o'tamiz. Har bir li teg bir nechta atributlarga ega bo'lishi kerak: ma'lumotlar maqsadi, bu ma'lum bir Karuselning identifikatoriga ishora qiladi va ma'lumotlarga o'tish, qaysi ramka raqamiga o'tishni aniqlaydi.

Tasvirlarni oldinga yoki orqaga o'zgartiradigan tugmalarga kelsak, ularni amalga oshirish uchun atributni ro'yxatdan o'tkazish kerak ma'lumotlar-slayd"oldingi" yoki "keyingi" kalit so'zi bilan.

Endi siz ramkaning asosiy elementlari haqida bilasiz, buning yordamida siz slayderning ko'rinishini ma'lum bir tarzda tahrirlashingiz mumkin. Tabiiyki, siz ramkani avtomatik aylantirishni, tasvir sarlavhalarini yoki yon tugmalarni o'chirib qo'yishingiz mumkin.

Boshqaruvning alternativ mexanizmlari

Bootstrap-ning o'rnatilgan sinflaridan foydalanishdan tashqari, ga ham qarashingiz mumkin. Shunday qilib, JSda bir xil amallarni faqat $.carousel () asbobi orqali amalga oshiradigan ko'plab usullar va variantlar mavjud. Ular orasida quyidagilarni sanab o'tish mumkin:

bilim testi

Xo'sh, endi materialni qanday o'rganganingizni tekshirish va olingan bilimlarni mustahkamlash vaqti keldi. Buning uchun men "Karusel" ni yaratish yo'lida bajarishingiz kerak bo'lgan har bir harakatni tasvirlab beraman.

Avval siz kerakli skriptlar va uslublarni kiritishingiz kerak. Men afzal ko'raman, lekin siz ramkani rasmiy veb-saytdan yuklab olishingiz mumkin ( http://getbootstrap.com/) va yuklab olingan fayllarni loyiha katalogining ildiziga joylashtiring.

Agar siz men bilan rozi bo'lsangiz, hujjatning sarlavhasida biz yozamiz:

1 2 3

Agar siz ikkinchi usul tarafdori bo'lsangiz, unda havolaning birinchi qismi o'rniga faylga yo'lni kiritishingiz kerak.

Endi slayderda amalga oshirish qoladi. Buning uchun olingan bilimlaringizdan foydalaning va kerakli kod qismlarini quyidagi tartibda yozing:

tasvirlangan asbob uchun mas'ul bo'lgan umumiy blokni ochish;
nazorat ko'rsatkichlarini belgilash uchun blok;
slaydlarning o'zlari uchun blokirovka qilish;
yon tugmalarni amalga oshirish.

Ushbu ro'yxatdan faqat ikkinchi va oxirgi divlarni chiqarib tashlash mumkin.

Endi siz aniq kod yozishga tayyorsiz.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

Karusel galereyasiga misol

/*Asosiy blokni yarating*/

/*Slaydlarni toʻldirish*/

Karusel galereyasiga misol

/*Asosiy blokni yarating*/

/*Rasmlar soniga ko‘ra 4 ta ko‘rsatkichni ko‘rsating*/ /*Slaydlarni to‘ldiring*/ /*Yon boshqaruv tugmalarini yarating*/

Tasvir elementlari yoki karusel matnli slaydlar orqali takrorlash uchun slayd-shou komponenti. Page Visibility API-ni qo'llab-quvvatlaydigan brauzerlarda karusel veb-sahifalar foydalanuvchiga ko'rinmasa (masalan, brauzer faol bo'lmaganda, brauzer oynasi kichraytirilganda va hokazo) slaydlarni almashtirishdan qochadi. Ichki karusellar qo'llab-quvvatlanmaydi.

Misol

Internet Explorer 9 da animatsiya qo‘llab-quvvatlanmaydi

Bootstrap animatsiya uchun faqat CSS3 dan foydalanadi, lekin Internet Explorer 9 kerakli CSS xususiyatlarini qo'llab-quvvatlamaydi. Shuning uchun, ushbu brauzerdan foydalanganda slaydga o'tish animatsiyasi mavjud emas. Biz ataylab o'tishlar uchun jQuery-ga asoslangan zaxiralarni 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 bilan slaydlaringizga taglavhalarni osongina qo'shing. U erda deyarli qo'shimcha HTML 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.

...

Foydalanish imkoniyati muammosi

Karusel komponenti mavjudlik standartlariga umuman javob bermaydi. Agar sizga moslik kerak bo'lsa, Kontentingizni taqdim etishning boshqa usullarini ko'rib chiqing.

Foydalanish

Bir nechta karusel

Karusellar to'g'ri ishlashi uchun karuselni boshqarish uchun eng chetdagi idishda (.karuselda) identifikatordan foydalanishni talab qiladi. Bir nechta karusel qo'shganda yoki karusel identifikatorini o'zgartirganda, tegishli boshqaruv elementlarini yangilashni unutmang.

Ushbu atributlar bilan

Ma'lumotlar atributlaridan foydalanib, karusel o'rnini boshqarish oson. data-slide oldingi yoki keyingi tomonidan so'ralishi mumkin, bu slayderning o'rnini joriy holatiga nisbatan o'zgartiradi. Shu bilan bir qatorda, xom karusel slayd indeksini data-slide-to="2" ga o'tkazish uchun data-slide-to-dan foydalaning, bu slayd o'rnini 0 dan boshlanadigan indeks ta'riflari bilan almashtiradi.

data-ride="carousel" atributi karuselni sahifa yuklanishidan boshlab animatsiya sifatida belgilash uchun ishlatiladi. Uni bir xil karuselning (keraksiz) aniq JavaScript ishga tushirishi bilan birgalikda ishlatib bo'lmaydi.