Карусель
Ҷузъи слайд-шоу барои гузаштан дар байни элементҳо - тасвирҳо ё слайдҳои матн - ба монанди карусел.
Он чӣ гуна кор мекунад
Карусел слайд-шоу барои велосипедронӣ аз як силсила мундариҷа мебошад, ки бо тағиротҳои CSS 3D ва каме JavaScript сохта шудааст. Он бо як қатор тасвирҳо, матн ё аломатгузории фармоишӣ кор мекунад. Он инчунин дастгирии назорат ва нишондиҳандаҳои қаблӣ / ояндаро дар бар мегирад.
Дар браузерҳое, ки API Visibility Page Visibility дастгирӣ карда мешавад, карусел аз лағжиш канорагирӣ мекунад, вақте ки веб саҳифа ба корбар намоён нест (масалан, вақте ки варақаи браузер ғайрифаъол аст, равзанаи браузер кам карда мешавад ва ғ.).
prefers-reduced-motion
дархости медиа вобаста аст. Ба
қисмати камшудаи ҳаракати ҳуҷҷатҳои дастрасии мо нигаред .
Лутфан бидонед, ки каруселҳои лона пуштибонӣ намешаванд ва каруселҳо ба стандартҳои дастрасӣ мувофиқ нестанд.
Ниҳоят, агар шумо JavaScript-и моро аз сарчашма сохта истода бошед, онutil.js
.
Мисол
Каруселҳо андозаи слайдҳоро ба таври худкор муқаррар намекунанд. Ҳамин тавр, ба шумо лозим меояд, ки утилитаҳои иловагӣ ё услубҳои фармоиширо барои андозаи мувофиқи мундариҷа истифода баред. Гарчанде ки каруселҳо назорат ва нишондиҳандаҳои қаблӣ/ояндаро дастгирӣ мекунанд, онҳо ба таври возеҳ талаб карда намешаванд. Илова ва танзим кунед, ки шумо мувофиқат мекунед.
Синфро .active
ба яке аз слайдҳо илова кардан лозим аст, вагарна карусель намоён нахоҳад шуд. Ҳамчунин боварӣ ҳосил кунед, ки id
барои .carousel
назорати ихтиёрӣ як беназир таъин кунед, хусусан агар шумо дар як саҳифа якчанд каруселҳоро истифода баред. Унсурҳои назорат ва нишондиҳанда бояд data-target
атрибут (ё href
барои истинодҳо) дошта бошанд, ки id
ба .carousel
унсур мувофиқат кунанд.
Танҳо слайдҳо
Дар ин ҷо карусел танҳо бо слайдҳо мавҷуд аст. Мавҷудияти .d-block
ва .w-100
дар тасвирҳои каруселӣ барои пешгирӣ кардани ҳамоҳангсозии тасвири пешфарз дар браузер қайд кунед.
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>
Бо назорат
Илова кардани назорати қаблӣ ва оянда. Мо тавсия медиҳем <button>
, ки элементҳоро истифода барем, аммо шумо инчунин метавонед <a>
элементҳоро бо role="button"
.
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</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 src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Бо сарлавҳаҳо
Ба слайдҳои худ бо .carousel-caption
унсури дохили ягон .carousel-item
. Онҳоро ба осонӣ дар намоишгоҳҳои хурдтар, тавре ки дар зер нишон дода шудааст, бо утилитаҳои намоишии ихтиёрӣ пинҳон кардан мумкин аст . Мо онҳоро дар аввал бо пинҳон мекунем .d-none
ва онҳоро дар дастгоҳҳои миёнаҳаҷм бо .d-md-block
.
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Crossfade
Ба .carousel-fade
карусели худ илова кунед, то слайдҳоро бо гузариши пажмурда ба ҷои слайд анимат кунед. Вобаста ба мундариҷаи карусели худ (масалан, танҳо слайдҳои матнӣ), шумо метавонед ба s барои crossfading дуруст илова кунед .bg-body
ё якчанд CSS фармоишӣ кунед..carousel-item
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleFade" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
.carousel-item
Фосилаи инфиродӣ
Илова data-interval=""
ба a .carousel-item
барои тағир додани миқдори вақт барои таъхир байни даврзании худкор ба ҷузъи навбатӣ.
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="10000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-interval="2000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Лағжиши ламсро хомӯш кунед
Каруселҳо лағжиши чап/рост дар дастгоҳҳои экрани сенсорӣ барои ҳаракат дар байни слайдҳо дастгирӣ мекунанд. Инро бо истифода аз data-touch
аттрибутӣ ғайрифаъол кардан мумкин аст. Намунаи дар поён овардашуда низ атрибутро дар бар намегирад data-ride
ва аз data-interval="false"
ин рӯ, он худкор бозӣ намекунад.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Истифода
Тавассути атрибутҳои додаҳо
Атрибутҳои маълумотро истифода баред, то мавқеи каруселро ба осонӣ идора кунед. data-slide
калимаҳои калидӣ prev
ё -ро қабул мекунад next
, ки мавқеи слайдро нисбат ба мавқеъи ҷории он тағйир медиҳад. Интихобан, data-slide-to
барои интиқол додани индекси слайди хом ба карусел истифода баред data-slide-to="2"
, ки он мавқеи слайдро ба шохиси мушаххасе, ки аз 0
.
Аттрибут data-ride="carousel"
барои қайд кардани карусел ҳамчун аниматсия аз сарбории саҳифа истифода мешавад. Агар шумо data-ride="carousel"
барои оғоз кардани карусел истифода набаред, шумо бояд онро худатон оғоз кунед. Онро дар якҷоягӣ бо оғозкунии возеҳ JavaScript-и ҳамон карусел истифода бурдан мумкин нест.
Тавассути JavaScript
Каруселро дастӣ бо:
$('.carousel').carousel()
Имконот
Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-
монанди замима кунед data-interval=""
.
Ном | Навъи | Пешфарз | Тавсифи |
---|---|---|---|
фосила | рақам | 5000 | Миқдори вақт барои таъхир дар байни велосипедронии автоматии ашё. Агар false , карусел ба таври худкор давр намезанад. |
клавиатура | булӣ | дуруст | Оё карусел бояд ба рӯйдодҳои клавиатура вокуниш нишон диҳад. |
таваққуф кардан | сатр | булӣ | 'гурез' | Агар ба танзим гузошта шуда бошад Дар дастгоҳҳои ламсӣ, вақте ки ба он гузошта шудааст |
савор | сатр | дурӯғ | Пас аз он ки корбар ҷузъи аввалро дастӣ давр мезанад, каруселро худкор боз мекунад. Агар ба , танзим шуда бошад 'carousel' , каруселро ҳанго��и боркунӣ худкор боз мекунад. |
печонед | булӣ | дуруст | Новобаста аз он ки карусель бояд пайваста давр занад ё таваққуфҳои сахт дошта бошад. |
ламс кунед | булӣ | дуруст | Новобаста аз он ки карусел бояд мутақобилаи лағжиши чап/ростро дар дастгоҳҳои экрани сенсорӣ дастгирӣ кунад. |
Усулҳо
Усулҳо ва гузаришҳои асинхронӣ
Ҳама усулҳои API асинхронӣ мебошанд ва гузаришро оғоз мекунанд. Онҳо баробари оғоз шудани гузариш ба зангзананда бармегарданд, аммо пеш аз анҷоми он . Илова бар ин, даъвати методӣ ба ҷузъи гузариш нодида гирифта мешавад.
Барои маълумоти бештар ба ҳуҷҷатҳои JavaScript-и мо нигаред .
.carousel(options)
Каруселро бо имконоти ихтиёрӣ object
оғоз мекунад ва дар байни ашё давр заданро оғоз мекунад.
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
Дар байни ҷузъҳои карусел аз чап ба рост давр мезанад.
.carousel('pause')
Каруселро аз гардиши байни ашё бозмедорад.
.carousel(number)
Каруселро ба чаҳорчӯбаи мушаххас давр мезанад (дар асоси 0, монанд ба массив). Ба зангзананда пеш аз намоиш додани ашёи мақсаднок бармегардад (яъне пеш аз slid.bs.carousel
рух додани ҳодиса).
.carousel('prev')
Давра ба банди қаблӣ. Ба зангзананда пеш аз намоиш додани ашёи қаблӣ бармегардад (яъне пеш аз slid.bs.carousel
рух додани ҳодиса).
.carousel('next')
Давра ба банди оянда. Пеш аз намоиш додани ашёи навбатӣ (яъне пеш аз slid.bs.carousel
рух додани ҳодиса) ба зангзананда бармегардад.
.carousel('dispose')
Карусели элементро нест мекунад.
.carousel('nextWhenVisible')
Вақте ки саҳифа намоён набошад ё карусел ё волидайни он намоён набошад, каруселро ба навбати дигар нагузаронед. Пеш аз намоиш додани ашёи навбатӣ (яъне пеш аз slid.bs.carousel
рух додани ҳодиса) ба зангзананда бармегардад.
.carousel('to')
Каруселро ба чаҳорчӯбаи мушаххас давр мезанад (дар асоси 0, монанд ба массив). Пеш аз намоиш додани ашёи навбатӣ (яъне пеш аз slid.bs.carousel
рух додани ҳодиса) ба зангзананда бармегардад.
Ҳодисаҳо
Синфи карусели Bootstrap ду ҳодисаро барои пайвастшавӣ ба функсияи карусел фош мекунад. Ҳарду ҳодиса дорои хосиятҳои иловагии зерин мебошанд:
direction
: Самт, ки дар он карусел ҳаракат мекунад (ё"left"
ё"right"
).relatedTarget
: Унсури DOM, ки ҳамчун унсури фаъол ба ҷои ҷойгир карда мешавад.from
: Индекси банди ҷорӣto
: Индекси банди навбатӣ
Ҳама рӯйдодҳои каруселӣ ба худи карусел (яъне дар <div class="carousel">
).
Навъи ҳодиса | Тавсифи |
---|---|
слайд.б.карусел | slide Вақте ки усули мисол даъват карда мешавад, ин ҳодиса фавран оғоз меёбад. |
slid.bs.carousel | Ин ҳодиса вақте оғоз мешавад, ки карусел гузариши слайди худро анҷом дод. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Давомнокии гузаришро тағир диҳед
Давомнокии гузаришро .carousel-item
бо $carousel-transition
тағирёбандаи Sass пеш аз тартиб додан ё сабкҳои фармоишӣ тағир додан мумкин аст, агар шумо CSS-и тартибдодашударо истифода баред. Агар гузаришҳои сершумор татбиқ карда шаванд, боварӣ ҳосил кунед, ки гузариши табдил аввал муайян карда шудааст (масалан transition: transform 2s ease, opacity .5s ease-out
).