Carousel bootstrap 3 օրինակ. Ստեղծեք ձեր սեփական սլայդերը Bootstrap-ում մի քանի պարզ քայլերով: Պահանջում է սկզբնական ակտիվ տարր

⁰

Twitter Bootstrap 3-ը լավագույն CSS շրջանակներից մեկն է բովանդակության կառավարման համակարգերի մշակման և պահպանման համար: Bootstrap-ի միջոցով դուք կարող եք հեշտությամբ ստեղծել բլոգեր կամ պորտֆոլիոներ՝ օգտագործելով Twitter Bootstrap-ի ցանցային դասավորության համակարգը: Շատ CMS համակարգերի հիմքում մենք սովորաբար ունենք հիմնական բաղադրիչ, որը կոչվում է «Slider» (կարուսել), հիմնականում այն պատկերների ավտոմատ հաջորդական ցուցադրումն է, բայց այն կարող է նաև ցուցադրել վերջերս ավարտված նախագծերը, ձեր հաճախորդների ակնարկները, նկարագրությունները: հատուկ ԱՌԱՋԱՐԿՆԵՐ, նորությունների կամ բլոգի վերջին հոդվածների հղումներ: Այս հոդվածում մենք կանդրադառնանք, թե ինչպես կարելի է ստեղծել սլայդեր՝ օգտագործելով Կարուսել բաղադրիչը Twitter Bootstrap 3-ում:

Ներածություն Twitter Bootstrap 3 կարուսել բաղադրիչին

Կարուսելի բաղադրիչի նշումը հետևյալն է.

...

...

Վերոնշյալ կոդից մենք կարող ենք տեսնել, որ Bootstrap 3 սահիչը բաժանված է մի քանի մասի.

Ցուցանիշներ
Սլայդերի բովանդակությունը
Կառավարում

Տարրը վերարտադրելու համար դիվսլայդերում մենք ավելացնում ենք դասերի անունները. կարուսելԵվ Սլայդ. Դասարան կարուսելստեղծում է «կարուսելի» էֆեկտ, այսինքն՝ փոխում է սլայդները շրջանագծի մեջ։ Դասարան Սլայդավելացնում է սահող անիմացիա աջ կամ ձախ կողմից: Ցուցիչները սահիկի ներքևի մասում փոքր շրջանակներ են, որոնք որոշում են սլայդի ընթացիկ դիրքը և սլայդների քանակը: Ինդեքսները ստեղծվում են պատվիրված ցանկի միջոցով:

Պատվիրված ցուցակն ունի դաս կարուսել-ցուցիչներ, որը երեխայի տարրերը վերածում է փոքր շրջանակների: Յուրաքանչյուր տարր լիպետք է ունենա հատկանիշ տվյալների թիրախմայր կոնտեյների ID-ով: Այն պետք է ունենա նաև հատկանիշ data-slide-toեզակի թվային արժեքով, կոնկրետ սլայդին անդրադառնալու համար, արժեքները պետք է սկսվեն «0»-ով:

...

...

Յուրաքանչյուր տարր՝ դասի հետ կետունի երկու ենթաբաժին. պատկերԵվ կարուսել-մակագրություն. Պատկերն օգտագործվում է որպես սլայդի ֆոն: Տարրը դասի հետ կարուսել-մակագրությունգտնվում է պատկերի վերևում և օգտագործվում է որպես սլայդի վերնագիր: Ներսում կարուսել-մակագրություն, մենք կարող ենք ավելացնել կամ պիտակներ, կամ նույնիսկ երկուսն էլ:

Վերահսկումն իրականացվում է ձախ և աջ սլաքներով, որոնք օգտագործվում են սլայդները ձեռքով փոխելու համար:

Պետք է լինի երկու տարր՝ մեկը յուրաքանչյուր ուղղության համար: Առաջին տարրը կունենա spanտարր դասերի հետ glyphicon glyphicon-chevron-ձախորը ձախ սլաքի պատկերակ է, և երկրորդ տարրը կունենա դասեր glyphicon glyphicon-chevron-աջ, սա ճիշտ սլաքն է։ Bootstrap-ում պատկերների փոխարեն մենք կարող ենք օգտագործել տառատեսակներ՝ պատկերակները ցուցադրելու համար:

Այսքանը: Դուք հաջողությամբ ստեղծեցիք սլայդեր ձեր կայքի համար: Բացի այդ, դուք JavaScript-ի ոչ մի տող չեք գրել, բայց bootstrap.js-ն ամեն ինչ արել է ձեզ համար:

Կարուսելի կարգավորումներ

Սլայդերը հետագայում հարմարեցնելու համար կարող եք ավելացնել մի քանի ատրիբուտներ տվյալներ-*մայր կարուսելի կոնտեյների համար:

"տվյալների ինտերվալ"-ն օգտագործվում է սլայդների միացման միջև ընկած ժամանակահատվածը նշելու համար: Այն վերցնում է թվային արժեք, և թիվը պետք է լինի միլիվայրկյաններով:
"տվյալների դադար«օգտագործվում է որոշելու, թե երբ է գործարկվելու դադարի իրադարձությունը: Օրինակ, երբ է այն « սավառնել«, սլայդների փոխարկումը դադարում է, երբ մկնիկը գտնվում է սահիկի վրայով:
"տվյալների փաթեթավորում«Բուլյան հատկանիշ է, որը թույլ է տալիս սահմանել, թե արդյոք սլայդների փոխարկումը պետք է վերսկսվի, եթե սլայդների ցանկի վերջը հասնի:

Կարգավորում jQuery-ով

Եթե ցանկանում եք օգտագործել jQuery և data-* ատրիբուտները, Bootstrap-ը թույլ է տալիս սկզբնավորումը JavaScript-ի միջոցով: Դա անելու համար կարող եք գրել հետևյալ կոդը.

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

Կարուսելի կարգավորումները կարող են սահմանվել ընտրանքների միջոցով: Օրինակ:

$(".կարուսել") .կարուսել ((
ընդմիջումը՝ 2000
դադար՝ «սավառնել»,
փաթաթել՝ ճշմարիտ
} ) ;

Կարող եք նաև ձեռքով գործարկել սլայդերի իրադարձությունները՝ օգտագործելով հետևյալ կոդը.

.կարուսել («դադար») // դադար
.carousel("ցիկլ") // միացնել սլայդները
.կարուսել(3) // ցույց տալ չորրորդ սլայդը
.carousel("prev") // ցույց տալ նախորդ սլայդը
.carousel("next") // ցույց տալ հաջորդ սլայդը

Վերոնշյալ մեթոդները կարելի է կանչել JavaScript-ի ցանկացած կոդից՝ սահիկի նորմալ աշխատանքը վերահսկելու համար: Ես գտնում եմ, որ նախորդ և հաջորդ մեթոդները շատ օգտակար են, եթե ես ուզում եմ ցույց տալ իմ սեփական կոճակները ստանդարտ սլաքների փոխարեն: Հատկապես, երբ դրանք գտնվում են կարուսելի դասավորությունից դուրս:

Եզրակացություն

Այս հոդվածը պետք է օգտակար լինի նրանց համար, ովքեր ցանկանում են սովորել, թե ինչպես ստեղծել սլայդեր՝ առանց JavaScript-ում կոդերի հազարավոր տողեր գրելու: Սա, անկասկած, կբարձրացնի զարգացման արագությունը։ Լավագույնն այն է, որ այս լուծումը համատեղելի է բրաուզերների հետ, այնպես որ դուք ստիպված չեք լինի պոկել ձեր մազերը, որպեսզի դրանք աշխատեն ավելի հին բրաուզերների վրա:

Եթե ունեք հարցեր, խորհուրդ ենք տալիս օգտագործել մեր

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

Հետևաբար, ես ձեզ կասեմ, թե ինչպես ստեղծել «Կարուսել» սահիչը, դրա համար ինչ ներկառուցված գործիքներ կպահանջվեն, ինչպես կարող եք կարգավորել պարամետրերը, և հոդվածի վերջում ես ձեզ ցույց կտամ կոնկրետ օրինակի իրականացումը: . Հիմա եկեք անցնենք գործին:

Ամեն ինչ Bootstrap Carousel Plugin գործիքների մասին

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

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

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

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

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

Սկզբից, «Կարուսել» բլոկի ստեղծումն ինքնին պահանջում է id="myCarousel"-ի հայտարարում, որպեսզի վերջինս ճիշտ գործի:

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

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

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

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

Այլընտրանքային կառավարման մեխանիզմներ

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

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

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

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

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

1 2 3

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

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

նկարագրված գործիքի համար պատասխանատու ընդհանուր բլոկի բացում.

բլոկ կառավարման ցուցիչները նշելու համար;

արգելափակում հենց սլայդների համար;

կողային կոճակների իրականացում:

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

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

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

Կարուսելի պատկերասրահի օրինակ .carousel-inner > .item > img, .carousel-inner > .item > a >
/*Հիմնական բլոկի ստեղծում*/ /*Սլայդների լրացում*/

Ռոմանտիկ

Տոնական

տուն

Հարսանիք Նախորդ Հաջորդ

Կարուսելի պատկերասրահի օրինակ .carousel-inner > .item > img, .carousel-inner > .item > a > img ( լայնությունը՝ 70%; լուսանցք՝ auto; )
/*Ստեղծեք հիմնական բլոկը*/ /*Նշեք 4 ցուցիչ՝ ըստ պատկերների քանակի*/ /*Լրացրեք սլայդները*/ Ռոմանտիկ

Քնքուշ վարդերի փունջ սիրո հայտարարության համար

Տոնական

Պայծառ նվեր ցանկացած առիթի համար

տուն

Թարմ ծաղիկներով զամբյուղը հարմարավետություն կհաղորդի ցանկացած տուն։

Հարսանիք

Նուրբ գույները կընդգծեն միջոցառման նշանակությունը

/*Կողային կառավարման կոճակների ստեղծում*/ Նախորդ հաջորդը

Եկեք իրականացնենք սլայդերը՝ օգտագործելով bootstrap շրջանակը, որը նաև հայտնի է որպես Twitter Bootstrap: Դա անելու համար եկեք գնանք Bootstrap կայք, ներբեռնենք դրա ֆայլերը ձեր համակարգչում և տեղափոխենք այս ֆայլերը ձեր զարգացման միջավայր:

Ես նախապես պատրաստել եմ ամբողջ կառույցը, ներառել եմ նրանց ինդեքսային ֆայլում, իսկ ամբողջ արխիվը կարող եք ներբեռնել ստորև նշված հղումից։

Unzip այն և փոխանցեք բոլոր ֆայլերը ձեր զարգացման միջավայր:

Եկեք նայենք արխիվի կառուցվածքին

Եկեք անցնենք նրա արխիվային կառուցվածքը և տեսնենք, թե ինչ կա դրա մեջ:

Մենք բացում ենք ինդեքսային ֆայլը, վերևում մենք միացնում ենք Jquery գրադարանը, դրա հետևում մենք կապում ենք bootstrap շրջանակը js ընդլայնման հետ, որը գտնվում է JS թղթապանակում, դրա հետևում մենք միացնում ենք bootstrap-ը CSS ընդլայնմամբ, իսկ ներքևում մենք միացնում ենք: ֆայլը, որտեղ մենք կգրենք մեր ոճերը, այս ամենը գտնվում է CSS թղթապանակում: Տառատեսակների թղթապանակում կան պատկերակներ, որոնք օգտագործում է bootstrap-ը, Img-ում կան պատկերներ սլայդերի համար և պատկերներ ֆոնի համար:

Սա ամբողջ ձևանմուշն է և դրա ամբողջ կառուցվածքը, այնուհետև անցնենք շրջանակի նկարագրությանը:

Պատասխանատու Slider

Նկարագրելով սլայդերի շրջանակը

Ստեղծեք div բլոկ id="dws-slider" սլայդերի նույնացուցիչով և ավելացրեք "carousel slide" դասը:

Այնուհետև մենք գրում ենք սլայդի յուրաքանչյուր տարր առանձին բլոկում և կազմում երեքը։

(.item>img+.carousel-caption>h3.text-mapercase+p)*3

Իսկ որպեսզի առաջին սլայդը ցուցադրվի, պետք է առաջին տարրի համար ավելացնել .active դասը։ Այնուհետև բլոկները լցնում ենք տեքստային բովանդակությամբ։

Պատասխանատու Slider

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquet elit lorem, ac congue mi eleifend sit amet. Sed dignissim viverra neque a tristique.

Անիմացիոն ոլորում

Aenean cursus imperdiet erat sit amet facilisis. Phasellus congue, sem in consectetur accumsan, տելուս ռիսուս sollicitudin mauris, quis ornare libero magna eget ex.

Հեշտ տեղադրում

Praesent dictum, orci eget eleifend auctor, urna ex dapibus odio, vitae pretium neque massa vel neque. Donec et interdum diam. Morbi dignissim vestibulum mi ac viverra.

Այժմ եկեք կարգավորիչներ ավելացնենք սահիկի կողերին:

Նախորդ Հաջորդ

Եկեք ժամանակավորապես դադարեցնենք ավտոմատ ցուցակագրումը:

$(".carousel").carousel(( ընդմիջում. կեղծ ))

Եկեք ավելացնենք ոլորման ցուցիչներ:

Մենք նկարագրում ենք ոճերը և անիմացիան

Եկեք գնանք ոճերի ֆայլ և նկարագրենք բլոկները տեքստով:

Կարուսել-ներքին h3 (ֆոնի գույնը՝ rgba(20, 49, 68, 0.6); լիցք՝ 20px; լիցք՝ 20px;

Եկեք նրանց նշանակենք առանցքային կադրեր և անիմացիա պատրաստենք։

Կարուսել-ներքին h3 (ֆոնի գույնը՝ rgba(20, 49, 68, 0.6); լիցք՝ 20px; անիմացիա՝ anim-H3 1.3s ease-out; ) .կարուսել-ներքին p (տառաչափը՝ 18px; ֆոն- rgba (30, 29, 29, 0.6 padding: anim-P 1.6s ease-out); դեպի ( անթափանցիկություն՝ 1; փոխակերպում՝ translateX(0); ) ) @keyframes anim-P (-ից ( անթափանցիկություն՝ 0; փոխակերպում՝ translateX(2000px); ) դեպի ( անթափանցություն՝ 1; փոխակերպում՝ translateX(0); ) )

Բլոկների հարմարեցում տեքստով

Որպեսզի մեդիա հարցումների ոճերը ճիշտ աշխատեն, մենք կավելացնենք տեսադաշտի մետա թեգը:

Եկեք գնանք մեդիա ֆայլ և դրանում նկարագրենք տարբեր ընդարձակման տեքստով բլոկների ոճերը:

Կարուսել-ներքին h3 ( տառաչափ՝ 20px; լիցք՝ 15px; ) .carousel-inner p ( տառաչափ՝ 16px; padding՝ 10px; ) @media all and (max-width՝ 768px) ( .carousel-ca ներքևում՝ 10% ) .կարուսել-ներքին h3 ( տառաչափ՝ 18px; ) .կարուսել-ներքին p ( տառաչափ՝ 14px; ) ) @media all and (max-width՝ 600px) ( .կարուսել-ներքին h3 (ցուցադրում՝ ոչ մեկը; ) .կարուսել-ներքին p (ցուցադրում՝ չկա; ) )

Այնուհետև կարող եք ավտոմատ ոլորումը սահմանել 7 վայրկյան, և սահիկը պատրաստ է:

$(".կարուսել").կարուսել(( ընդմիջում` 7000 ))

Եթե ձեզ դուր եկավ Bootstrap 3-ում սլայդերի ներդրման օրինակը, կիսվեք այն ձեր ընկերների հետ սոցիալական ցանցերում։

Դասը պատրաստեց Դենիս Գորելովը։

Սլայդշոուի բաղադրիչ հեծանվային տարրերի համար՝ պատկերի կարուսել կամ տեքստային սլայդներ:

Ինչպես է դա աշխատում

Կարուսելը մի շարք բովանդակության ցուցադրման սլայդ շոու է, որը ստեղծվել է CSS 3D փոխակերպումների և մի քիչ JS-ի միջոցով: Այն աշխատում է տեքստի, պատկերների կամ սովորական նշագրման հետ: Այն նաև աջակցում է «հաջորդ/նախորդ» կոճակները:

Խնդրում ենք իմացեք, որ տեղադրված կարուսելները չեն ապահովվում, և կարուսելներն ընդհանրապես այնքան էլ ցանկալի չեն «մատչելիության չափանիշներով»:

Ներքևի գիծ, եթե դուք օգտագործում եք BS4 կարուսելներ, ապա դրա համար անհրաժեշտ է ներառել util.js-ը:

Օրինակ

Կարուսելը ավտոմատ կերպով չի փոխում ձեր սլայդների բովանդակությունը: Հետևաբար, ձեզ կարող են անհրաժեշտ լինել լրացուցիչ կոմունալ ծառայություններ՝ դրանց բովանդակությունը ցանկալի չափի չափելու համար: Քանի դեռ կարուսելներն աջակցում են նախորդ/հաջորդ կոճակները, դրանք բացահայտորեն ավելացնելու կարիք չունեն: Ինքներդ ավելացրեք և կազմաձևեք դրանք:

.active դասը ավելացվում է սլայդներից մեկին, հակառակ դեպքում կարուսելը չի երևա: Բացի այդ, վերահսկումներն իրականացնելու համար դուք պետք է եզակի ID սահմանեք .carousel class տարրին, հատկապես, եթե մեկ էջում ունեք բազմաթիվ կարուսելներ: Վերահսկիչները և ցուցիչները պետք է ունենան տվյալների թիրախ հատկանիշ (կամ href for ), որը համապատասխանում է class.carousel տարրի ID-ին:

Միայն սլայդներ

Ահա միայն սլայդներով կարուսելի օրինակ: Ուշադրություն դարձրեք .d-block և .w-100 դասերի առկայությանը, որոնք վերացնում են բրաուզերի լռելյայն հավասարեցումը կարուսելի պատկերների համար:

Տեղապահ Առաջին սլայդ

Տեղապահ Երկրորդ սլայդ

Տեղապահ Երրորդ սլայդ

Վերահսկիչներով

Ավելացնում է նախորդ/հաջորդ կոճակները.

Նախորդ ՀաջորդըՑուցանիշներով

Կարուսելին կարող եք նաև ցուցիչներ ավելացնել՝ կառավարիչների հետ միասին:

Նախորդ ՀաջորդըՊահանջում է սկզբնական ակտիվ տարր

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

Գրություններով

Ավելացրեք ենթագրեր ձեր սլայդներին՝ ավելացնելով .carousel-caption տարր ցանկացած .carousel-item տարրի վրա: Ենթագրերը կարող են հեշտությամբ թաքցվել փոքր սարքերում, օգտագործելով ցուցադրման կոմունալ ծառայությունները: Դրանք ի սկզբանե թաքցվում են՝ օգտագործելով .d-none դասը և կրկին ցուցադրվում են միջին սարքերի վրա՝ օգտագործելով .d-md-block դասը:

Տեղապահ Առաջին սլայդ

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

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.

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

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.

Նախորդ ՀաջորդըՍոսնձում

Ավելացրեք .carousel-fade ձեր կարուսելին՝ ձեր սլայդները աշխուժացնելու համար և գունաթափվեք հաջորդ սլայդում:

Նախորդ Հաջորդըհատուկ տարածություն.կարուսել-հատ

Ավելացրե՛ք data-interval="" .carousel-item-ին` հաջորդ տարրի ավտոմատ շրջափակման միջև ուշացման ժամանակը փոխելու համար:

Նախորդ ՀաջորդըՕգտագործումը հատկանիշների միջոցով

Data-slide հատկանիշը վերցնում է նախորդ կամ հաջորդ արժեքները, որոնք փոխում են սլայդի դիրքը ներկայիս դիրքի համեմատ: Կամ օգտագործեք data-slide-to՝ ինդեքսով սլայդ գնալու համար, օրինակ 2. data-slide-to="2" , սլայդների ինդեքսները սկսվում են 0-ից:

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

JavaScript-ի միջոցով

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

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

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

Անվան տեսակը կանխադրված Նկարագրություն

ընդմիջում	թիվ	5000	Սլայդի ավտոմատ փոփոխությունների միջև ուշացում: Եթե կեղծ է, ապա կարուսելը ինքնաբերաբար չի փոխի սլայդները:
ստեղնաշար	բուլյան	ճիշտ	Արդյո՞ք կարուսելը կարձագանքի ստեղնաշարի իրադարձություններին:
դադար	լարային \| բուլյան	"սավառնել"	Եթե «սավառնել» է դրված, սլայդի փոփոխությունը դանդաղեցվում է մկնիկի ներդիրով, և փոփոխությունը սկսվում է մկնիկի թևով: Եթե կեղծ է, ապա կարուսելի վրայով սավառնելը չի խանգարի սլայդների փոփոխությանը: Սարքեր, որոնք ակտիվանում են հպման միջոցով. «սավառնել» – կանգ առնել հպման պահին (երբ օգտագործողը ավարտել է փոխազդեցությունը կարուսելի հետ) երկու ընդմիջումով, ապա նորից փոխել սլայդները: Նկատի ունեցեք, որ այս վարքագիծը լրացնում է վերը նկարագրված մկնիկի վարքագիծը:
քշել	տող	կեղծ	Օգտագործողի կողմից սլայդի առաջին ձեռքով փոփոխությունից հետո կարուսելի սլայդների ավտոմատ փոփոխություն: Եթե կարուսել, ավտոմատ փոփոխությունը միացված է բեռնումից հետո:
պատել	բուլյան	ճիշտ	Կարուսելը սահա՞ն փոխվի, թե՞ առանձին:
հպում	բուլյան	ճիշտ	Կարուսելը պետք է ապահովի ձախ/աջ փոխազդեցությունը հպման սարքերի վրա:

Մեթոդներ Ասինխրոն մեթոդներ և անցումներ

Բոլոր API մեթոդները ասինխրոն են և անցում են առաջացնում: Դրանք վերադարձվում են այն ֆունկցիային, որը կանչել է դրանք անցման սկզբում, բայց մինչև անցման ավարտը։ Բացի այդ, անցում կատարող բաղադրիչի մեթոդի կանչը անտեսվելու է:

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

Նախաձեռնում է կարուսելի օբյեկտը նշված պարամետրերով և սկսում փոխել սլայդները:

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

Փոխում է կարուսելի սլայդները ձախից աջ:

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

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

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

Srolls-ը սահում է մինչև որոշակի կետ (0-ի վրա հիմնված, տողերի նման):

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

Ոլորվում է դեպի նախորդ սլայդը: Վերադարձնում է ֆունկցիայի կանչի արժեքը՝ նախքան թիրախային տարրը ցուցադրելը (այսինքն՝ մինչև slid.bs.carousel իրադարձությունը տեղի ունենալը):

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

Անցեք հաջորդ սլայդին: Վերադարձնում է ֆունկցիայի կանչի արժեքը՝ նախքան թիրախային տարրը ցուցադրելը (այսինքն՝ մինչև slid.bs.carousel իրադարձությունը տեղի ունենալը):

.կարուսել ("տնօրինել")

Ոչնչացնում է տարերքի կարուսելը:

Իրադարձություններ

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

ուղղություն. ուղղությունը, որով շարժվում են սլայդները («ձախ» կամ «աջ»):
relatedTarget. DOM տարրը, որը տեղափոխվում է «ոլորված» սլայդի դիրք:
from՝ Ընթացիկ սլայդի ինդեքս
դեպի՝ հաջորդ սլայդի ինդեքսը

Կարուսելի բոլոր իրադարձությունները նկարահանվում են անմիջապես կարուսելի մեջ (այսինքն՝ մեջ):

$(«#myCarousel»): on ("slide.bs.carousel" , ֆունկցիա () ( // անել ինչ-որ բան... )) Անցման տևողության փոփոխություն

Transition.carousel-item-ի տեւողությունը կարող է փոխվել Sass փոփոխական $carousel-transition-ում մինչ կոմպիլյացիան կամ սովորական CSS-ում (եթե օգտագործվում է կոմպիլացված CSS): Եթե օգտագործվում են մի քանի անցումներ, համոզվեք, որ փոխակերպման անցումը նախ նշված է (օրինակ՝ անցում. փոխակերպում 2s ease, անթափանցիկություն .5s ease-out):

Սլայդերի ցուցադրման բաղադրիչ՝ պատկերի տարրերի կամ տեքստային կարուսելի սլայդների միջով անցնելու համար: Բրաուզերներում, որոնք աջակցում են 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 կարուսելի դասը տրամադրում է երկու իրադարձություն՝ կարուսելի ֆունկցիոնալությունից կախված լինելու համար: Երկու իրադարձություններն ունեն հետևյալ լրացուցիչ հատկությունները.