Կարուսել
Սլայդերի ցուցադրման բաղադրիչ տարրերի (պատկերների կամ տեքստի սլայդների) միջով անցնելու համար, ինչպես կարուսելը:
Կարուսելը սլայդ շոու է մի շարք բովանդակության միջով հեծանվով անցնելու համար, որը կառուցված է CSS 3D տրանսֆորմացիաներով և մի քիչ JavaScript-ով: Այն աշխատում է մի շարք պատկերների, տեքստի կամ հատուկ նշագրման հետ: Այն նաև ներառում է աջակցություն նախորդ/հաջորդ վերահսկման և ցուցիչների համար:
Բրաուզերներում, որտեղ աջակցվում է Page Visibility API- ն, կարուսելը կխուսափի սահումից, երբ վեբ էջը տեսանելի չէ օգտատիրոջը (օրինակ, երբ դիտարկիչի ներդիրն ակտիվ չէ, դիտարկիչի պատուհանը նվազագույնի է հասցված և այլն):
Խնդրում ենք նկատի ունենալ, որ տեղադրված կարուսելները չեն աջակցվում, և կարուսելները սովորաբար չեն համապատասխանում մատչելիության չափանիշներին:
Ի վերջո, եթե դուք կառուցում եք մեր JavaScript-ը աղբյուրից, դա պահանջում էutil.js
:
Կարուսելները ավտոմատ կերպով չեն նորմալացնում սլայդի չափերը: Որպես այդպիսին, ձեզ կարող է անհրաժեշտ լինել օգտագործել լրացուցիչ կոմունալ ծառայություններ կամ հատուկ ոճեր՝ համապատասխան չափի բովանդակության համար: Թեև կարուսելներն աջակցում են նախորդ/հաջորդ հսկիչները և ցուցիչները, դրանք բացահայտորեն պարտադիր չեն: Ավելացրեք և հարմարեցրեք այնպես, ինչպես հարմար եք գտնում:
Համոզվեք, որ եզակի id դրել եք .carousel
կամընտիր հսկիչների համար, հատկապես, եթե մեկ էջի վրա օգտագործում եք բազմաթիվ կարուսելներ:
Ահա կարուսել միայն սլայդներով: Նկատի ունեցեք կարուսելի .d-block
և .img-fluid
կարուսելի պատկերների առկայությունը՝ զննարկիչի նախնական պատկերների հավասարեցումը կանխելու համար:
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
</div>
Ավելացնելով նախորդ և հաջորդ հսկիչները.
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Կարող եք նաև ցուցիչներ ավելացնել կարուսելին, կառավարիչների հետ մեկտեղ նույնպես:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Պահանջվում է սկզբնական ակտիվ տարր
Դասը .active
պետք է ավելացվի սլայդներից մեկում: Հակառակ դեպքում կարուսելը չի երևա։
Հեշտությամբ ավելացրեք ենթագրեր ձեր սլայդներին՝ օգտագործելով .carousel-caption
որևէ տարր .carousel-item
: Դրանք կարող են հեշտությամբ թաքցվել ավելի փոքր տեսադաշտերում, ինչպես ցույց է տրված ստորև, ընտրովի ցուցադրման կոմունալ ծառայություններով : Մենք դրանք սկզբում թաքցնում ենք .d-none
և հետ ենք բերում միջին չափի սարքերի վրա .d-md-block
:
Օգտագործեք տվյալների ատրիբուտներ՝ կարուսելի դիրքը հեշտությամբ կառավարելու համար: data-slide
ընդունում է հիմնաբառերը prev
կամ next
, որը փոխում է սլայդի դիրքը ներկայիս դիրքի համեմատ: Որպես այլընտրանք, օգտագործեք data-slide-to
՝ չմշակված սլայդի ինդեքսը կարուսելին փոխանցելու համար data-slide-to="2"
, որը սլայդի դիրքը տեղափոխում է որոշակի ինդեքսի՝ սկսած 0
.
Հատկանիշն data-ride="carousel"
օգտագործվում է կարուսելը որպես աշխույժ նշելու համար՝ սկսած էջի բեռնումից: Այն չի կարող օգտագործվել նույն կարուսելի (ավելորդ և անհարկի) բացահայտ JavaScript սկզբնավորման հետ համատեղ:
Ձեռքով զանգահարեք կարուսել՝
Ընտրանքները կարող են փոխանցվել տվյալների ատրիբուտների կամ JavaScript-ի միջոցով: Տվյալների ատրիբուտների համար ավելացրեք տարբերակի անունը data-
, ինչպես data-interval=""
.
Անուն | Տիպ | Կանխադրված | Նկարագրություն |
---|---|---|---|
ընդմիջում | թիվ | 5000 | Ժամանակի չափը, որը հետաձգվում է ապրանքի ինքնաբերաբար հեծանիվ վարելու միջև: Եթե կեղծ է, կարուսելը ինքնաբերաբար չի շրջվի: |
ստեղնաշար | բուլյան | ճիշտ | Արդյոք կարուսելը պետք է արձագանքի ստեղնաշարի իրադարձություններին: |
դադար | լարային | բուլյան | "սավառնել" | Եթե դրված է Հպումով միացված սարքերում, երբ դրված է |
քշել | լար | կեղծ | Ավտոմատ նվագարկում է կարուսելը այն բանից հետո, երբ օգտատերը ձեռքով շրջում է առաջին տարրը: Եթե «կարուսել», ապա ավտոմատ նվագարկում է կարուսելը բեռնվածության վրա: |
պատել | բուլյան | ճիշտ | Արդյոք կարուսելը պետք է անընդհատ պտտվի, թե կոշտ կանգառներ ունենա: |
Ասինխրոն մեթոդներ և անցումներ
Բոլոր API մեթոդները ասինխրոն են և սկսում են անցում : Նրանք վերադառնում են զանգահարողին հենց որ անցումը սկսվի, բայց մինչև այն ավարտվի : Բացի այդ, անցումային բաղադրիչի վրա մեթոդի կանչը անտեսվելու է :
Լրացուցիչ տեղեկությունների համար տես մեր JavaScript փաստաթղթերը:
Նախաձեռնում է կարուսելը կամընտիր ընտրանքներով object
և սկսում հեծանվով անցնել իրերի միջով:
Շրջում է կարուսելի տարրերի միջով ձախից աջ:
Դադարեցնում է կարուսելը իրերի միջով հեծանիվ անցնելուց:
Կարուսելը տեղափոխում է որոշակի շրջանակ (0-ի վրա հիմնված, զանգվածի նման): Վերադառնում է զանգահարողին՝ նախքան թիրախային տարրը ցուցադրելը (այսինքն՝ նախքան slid.bs.carousel
իրադարձությունը տեղի ունենալը):
Ցիկլեր դեպի նախորդ կետը: Վերադառնում է զանգահարողին նախքան նախորդ տարրի ցուցադրումը (այսինքն՝ նախքան slid.bs.carousel
իրադարձությունը տեղի ունենալը):
Շրջագայություններ դեպի հաջորդ կետ: Վերադառնում է զանգահարողին մինչև հաջորդ տարրի ցուցադրումը (այսինքն՝ նախքան slid.bs.carousel
իրադարձությունը տեղի ունենալը):
Ոչնչացնում է տարրի կարուսելը:
Bootstrap-ի կարուսելի դասը բացահայտում է երկու իրադարձություն՝ կարուսելի ֆունկցիոնալությանը միանալու համար: Երկու իրադարձություններն ունեն հետևյալ լրացուցիչ հատկությունները.
direction
Ուղղությունը, որով սահում է կարուսելը (կամ"left"
կամ"right"
):relatedTarget
DOM տարրը, որը սահում է իր տեղը որպես ակտիվ տարր:from
Ընթացիկ տարրի ինդեքսըto
Հաջորդ կետի ինդեքսը
Կարուսելի բոլոր իրադարձությունները կրակում են հենց կարուսելի վրա (այսինքն՝ <div class="carousel">
):
Միջոցառման տեսակը | Նկարագրություն |
---|---|
slide.bs.կարուսել | Այս իրադարձությունն անմիջապես գործարկվում է, երբ գործարկվում է slide օրինակի մեթոդը: |
slid.bs.կարուսել | Այս միջոցառումը գործարկվում է, երբ կարուսելը ավարտում է իր սլայդային անցումը: |