Bootstrap-ի միջոցով սլայդերի ստեղծում: Ինչպես ստեղծել ձեր սեփական bootstrap սլայդերը մի քանի հեշտ քայլերով Պատասխանատու կարուսել bootstrap 3-ի համար

).

$(«#myCarousel» ). on ("slide.bs.carousel", ֆունկցիա () (// անել ինչ-որ բան...))

Բարի օր բոլորին, ովքեր ցանկանում են նոր բան սովորել Bootstrap շրջանակի տարրերից: Այսօրվա թեման Bootstrap Carousel slider-ն է: Սա հանրաճանաչ տարր է, որն առկա է գրեթե բոլոր կայքերում:

Հետևաբար, ես ձեզ կասեմ, թե ինչպես ստեղծել Carousel slider, ինչ ներկառուցված գործիքներ են անհրաժեշտ դրա համար, ինչպես կարող եք կարգավորել պարամետրերը, և հոդվածի վերջում ես ցույց կտամ կոնկրետ օրինակի իրականացումը: Եվ հիմա գործի անցեք:

Ամեն ինչ Bootstrap Carousel Plugin Tools-ի մասին

Կարուսելի տիպի լուսանկարների պատկերասրահն օգտագործվում է նոր առաջարկների, ապրանքների, ընթացիկ ակցիաների ցանկի, պորտֆոլիոների հեշտ դիտման և այլնի ներկայացման համար: Հետևաբար, այսօր կարևոր է, որ կարողանանք աշխատել այս հավելվածի հետ պաշտոնական անվանումը Bootstrap Carousel Plugin.

Անմիջապես պետք է նշել, որ նկարագրված տարրը պատշաճ կերպով չի ապահովվում Internet Explorer 9-ում և ավելի վաղ տարբերակներում: Այնուամենայնիվ, այն հիանալի է աշխատում (WordPress, Joomla! և այլ շարժիչների համար շրջանակը միացնելը բավականին պարզ է):

Որպեսզի հեշտությամբ աշխատեք բոլոր պարամետրերով և արագ հարմարեցնեք սլայդերը, դուք պետք է սովորեք Bootstrap 3-ի հիմնական ներկառուցված դասերը:

Դասարան	նպատակը
կարուսել	Ինքնին ստեղծում է Carousel slider-ը:
Սլայդ	Css-ով ավելացնում է անիմացիայի և անցումների էֆեկտը՝ սլայդների միջև անցնելիս: Դասը ընտրովի է։
կարուսելի ցուցիչներ	Յուրաքանչյուր նկարի ներքևում ավելացնում է, այսպես ասած, կառավարման վահանակ փոքր կետերի տեսքով, որով կարող եք արագ անցնել ցանկացած պատկերի: Դասը ընտրովի է։
կարուսել-ներքին	Սլայդներն ինքնին ավելացնում է պատկերասրահում:
կարուսել-մակագրություն	Պատասխանատու է գրաֆիկական ֆայլերի ստորագրման համար: Կարելի է ներառել ըստ ցանկության։
կետ	Սահմանում է բովանդակության մի շարք յուրաքանչյուր սլայդի համար:
Աջ/ձախ կարուսել-կառավարում	Կադրերի միջև անցնելու համար ավելացնում է աջ և ձախ կոճակներ՝ ըստ անվանման:

Բացի այդ, արժե իմանալ նման պատկերասրահների դասավորության այլ առանձնահատկություններ:

Սկսնակների համար Կարուսելի բլոկի ստեղծումն ինքնին պահանջում է հայտարարություն id = "իմ կարուսել"վերջինիս ճիշտ գործունեության համար։

Նույն div-ում դուք պետք է գրանցեք հատկանիշը data-ride = "կարուսել", որը սահմանում է, որ անիմացիան պետք է բեռնվի հենց էջը բեռնվի։

Հիմա անցնենք ցուցանիշներին։ Յուրաքանչյուր li tag պետք է ունենա մի քանի հատկանիշներ. տվյալների թիրախ, որը մատնանշում է կոնկրետ Կարուսելի ID-ն, և data-slide-to, որը որոշում է, թե որ շրջանակի համարին պետք է գնալ:

Ինչ վերաբերում է պատկերները առաջ կամ ետ փոխող կոճակներին, դրանք իրականացնելու համար արժե գրանցել հատկանիշը տվյալների սլայդկամ «նախորդ» կամ «հաջորդ» հիմնաբառով:

Այժմ դուք գիտեք շրջանակի հիմնական տարրերի մասին, որոնց շնորհիվ կարող եք որոշակի ձևով խմբագրել սլայդերի ցուցադրումը: Բնականաբար, դուք կարող եք անջատել շրջանակի ավտոմատ ոլորումը, պատկերի ենթագրերը կամ կողային կոճակները:

Այլընտրանքային հսկողության մեխանիզմներ

Բացի Bootstrap-ի ներկառուցված դասերից օգտվելուց, կարող եք նաև դիտել . Այսպիսով, JS-ում կան բազմաթիվ մեթոդներ և տարբերակներ, որոնք իրականացնում են բոլոր նույն գործողությունները՝ միայն $.carousel () գործիքի միջոցով։ Դրանց թվում կարելի է թվարկել, ինչպիսիք են.

գիտելիքների ստուգում

Դե, հիմա ժամանակն է ստուգել, ​​թե ինչպես եք սովորել նյութը և համախմբել ստացած գիտելիքները: Դա անելու համար ես նկարագրելու եմ յուրաքանչյուր գործողություն, որը դուք պետք է կատարեք «Կարուսելի» ստեղծման ճանապարհին:

Նախ անհրաժեշտ է ներառել անհրաժեշտ սցենարներն ու ոճերը: Ես նախընտրում եմ, բայց դուք կարող եք ներբեռնել շրջանակը պաշտոնական կայքից ( http://getbootstrap.com/) և ներբեռնված ֆայլերը տեղադրեք նախագծի գրացուցակի արմատում:

Եթե ​​համաձայն եք ինձ հետ, ապա փաստաթղթի վերնագրում գրում ենք.

1 2 3

Եթե ​​դուք երկրորդ մեթոդի կողմնակից եք, ապա հղման առաջին մասի փոխարեն պետք է տեղադրեք ֆայլի ուղին։

Այժմ մնում է իրականացնել սլայդերում: Դա անելու համար օգտագործեք ձեր ձեռք բերած գիտելիքները և գրեք անհրաժեշտ կոդերը հերթականությամբ.

1. նկարագրված գործիքի համար պատասխանատու ընդհանուր բլոկի բացում.
2. բլոկ կառավարման ցուցիչները նշելու համար.
3. արգելափակում հենց սլայդների համար;
4. կողային կոճակների իրականացում:

Միայն երկրորդ և վերջին դիվիզները կարող են բացառվել այս ցանկից:

Այժմ դուք հաստատ պատրաստ եք կոդ գրել։

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

/*Ստեղծեք հիմնական բլոկը*/ /*Սլայդների լրացում*/ Ռոմանտիկ Տոնական տուն Հարսանիք Նախորդ Հաջորդը

Պատկերի տարրերի կամ կարուսելային տեքստի սլայդների միջոցով կրկնվող սլայդշոուի բաղադրիչ: Բրաուզերներում, որոնք աջակցում են Page Visibility API-ին, կարուսելը կխուսափի սլայդների փոխարկումից, երբ վեբ էջերը տեսանելի չեն օգտատիրոջը (օրինակ, երբ զննարկիչը ակտիվ չէ, դիտարկիչի պատուհանը նվազագույնի է հասցվում և այլն): Ներդրված կարուսելները չեն աջակցվում:

Օրինակ

Անիմացիաները չեն ապահովվում Internet Explorer 9-ում

Bootstrap-ը բացառապես օգտագործում է CSS3 անիմացիայի համար, սակայն Internet Explorer 9-ը չի աջակցում անհրաժեշտ CSS հատկություններին: Հետևաբար, այս դիտարկիչն օգտագործելիս սլայդների անցումային անիմացիա չկա: Մենք միտումնավոր որոշեցինք չներառել jQuery-ի վրա հիմնված հետադարձ կապերը անցումների համար:

Պահանջվում է սկզբնական ակտիվ տարր

.active դասը պետք է ավելացվի սլայդներից մեկին: Հակառակ դեպքում կարուսելները տեսանելի չեն լինի։

Լրացուցիչ վերնագրեր

Հեշտությամբ ավելացրեք ենթագրեր ձեր սլայդներին .carousel-caption տարրով ցանկացած .carousel-item-ում: Տեղադրեք մոտավորապես լրացուցիչ HTML այնտեղ, և այն ավտոմատ կերպով կհավասարեցվի և ձևաչափվի:

առաջին սլայդի պիտակը

Nulla vitae elit libero, a pharetra augue mollis interdum:

երկրորդ սլայդի պիտակ

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

երրորդ սլայդի պիտակ

Praesent commodo cursus Magna, vel scelerisque nisl consectetur.

Մատչելիության խնդիր

Կարուսելի բաղադրիչը բացարձակապես չի համապատասխանում մատչելիության չափանիշներին: Եթե ​​Ձեզ անհրաժեշտ է համատեղելիություն, խնդրում ենք դիտարկել ձեր Բովանդակությունը ներկայացնելու այլ եղանակներ:

Օգտագործումը

Բազմաթիվ կարուսելներ

Կարուսելները պահանջում են id-ի օգտագործումը ամենաարտաքին տարայի վրա (.կարուսելում)՝ կարուսելը ճիշտ գործելու համար: Մի քանի կարուսելներ ավելացնելիս կամ կարուսելի ID-ն փոխելիս համոզվեք, որ թարմացնեք համապատասխան կառավարները:

Այս հատկանիշներով

Օգտագործելով տվյալների ատրիբուտները, հեշտ է վերահսկել կարուսելի դիրքը: տվյալների սլայդը կարող է պահանջվել նախորդ կամ հաջորդի միջոցով, որը փոխում է սլայդերի դիրքը ներկայիս դիրքի համեմատ: Որպես այլընտրանք, օգտագործեք data-slide-to՝ չմշակված կարուսելի սլայդի ինդեքսը data-slide-to="2"-ին փոխանցելու համար, որը փոխհատուցում է սլայդի դիրքը 0-ից սկսած ինդեքսի սահմանումներով:

Data-ride="carousel" հատկանիշն օգտագործվում է կարուսելը որպես անիմացիա նշանակելու համար՝ սկսած էջի բեռնումից: Այն չի կարող օգտագործվել նույն կարուսելի (անհարկի) հստակ JavaScript սկզբնավորման հետ համատեղ:

JavaScript-ի միջոցով

Ձեռքով զանգահարեք կարուսելը՝

$("կարուսել"): կարուսել ()

Ընտրանքներ

Պարամետրերը կարող են փոխանցվել տվյալների ատրիբուտների կամ JavaScript-ի միջոցով: Տվյալների ատրիբուտների համար մուտքագրեք պարամետրի անունը data-, օրինակ՝ data-interval="":

Մեթոդներ

.կարուսել (տարբերակներ)

Նախաձեռնում է կարուսելը ընտրանքների օբյեկտի հետ և սկսում կրկնել տարրերի միջով:

$("կարուսել"): կարուսել (( ընդմիջում : 2000 ))

.կարուսել («ցիկլ»)

Անցնում է կարուսելի տարրերի միջով ձախից աջ:

.կարուսել («դադար»)

Դադարեցնում է կարուսելի կրկնությունը իրերի վրա:

.կարուսել(համար)

Կարուսելի ցիկլեր որոշակի շրջանակի համար (0-ի վրա հիմնված, զանգվածի նման):

.կարուսել («նախորդ»)

Շրջումներ դեպի նախորդ կետ:

.կարուսել («հաջորդ»)

Շրջագայություններ դեպի հաջորդ կետ:

Զարգացումներ

Bootstrap կարուսելի դասը տրամադրում է երկու իրադարձություն՝ կարուսելի ֆունկցիոնալությանը միանալու համար: Երկու իրադարձություններն ունեն հետևյալ լրացուցիչ հատկությունները.

• ուղղություն. ուղղությունը, որով կարուսելները հետ են գլորվում (կամ «ձախ» կամ «աջ»):
• relatedTarget. DOM տարրը տեղավորվում է որպես ակտիվ տարր:

Կարուսելի բոլոր իրադարձությունները կրակում են հենց կարուսելի վրա (այսինքն.