Карусель
Карусель сыяктуу элементтерди (сүрөттөрдү же тексттин слайддарын) айланып өтүү үчүн слайдшоу компоненти.
Карусель - бул CSS 3D трансформациялары жана бир аз JavaScript менен курулган бир катар мазмундар боюнча велосипед тебүү үчүн слайдшоу. Ал бир катар сүрөттөр, текст же ыңгайлаштырылган белгилөө менен иштейт. Ал ошондой эле мурунку/кийинки башкаруу жана көрсөткүчтөрдү колдоону камтыйт.
Page Visibility API колдоого алынган браузерлерде веб-баракча колдонуучуга көрүнбөй калганда (мисалы, серепчинин өтмөгү жигердүү эмес, серепчи терезеси кичирейтилген ж.
Эсиңизде болсун, уя салынган карусельдер колдоого алынбайт жана каруселдер жалпысынан жеткиликтүүлүк стандарттарына туура келбейт.
Акырында, эгер сиз биздин JavaScript булактан куруп жатсаңыз, андаutil.js
.
Каруселдер слайддын өлчөмдөрүн автоматтык түрдө нормалдаштырбайт. Ошентип, мазмунду туура өлчөмдөрдө кошумча утилиталарды же ыңгайлаштырылган стилдерди колдонуу керек болушу мүмкүн. Каруселдер мурунку/кийинки башкаруу элементтерин жана көрсөткүчтөрдү колдогону менен, алар так талап кылынбайт. Кошуңуз жана өзүңүз каалагандай ыңгайлаштырыңыз.
Кошумча башкаруу элементтери үчүн уникалдуу идентификаторду коюуну унутпаңыз .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=""
.
аты | Type | Демейки | Description |
---|---|---|---|
интервал | саны | 5000 | Нерсени автоматтык түрдө айлантуунун ортосундагы кечигүү убактысы. Эгер жалган болсо, карусель автоматтык түрдө айланбайт. |
клавиатура | логикалык | чын | Карусель клавиатурадагы окуяларга жооп бериши керекпи. |
тыныгуу | string | логикалык | "коп" | Эгер коюлса Тийүү иштетилген түзмөктөрдө, күйгүзүлгөндө |
минүү | сап | жалган | Колдонуучу биринчи нерсени кол менен айланткандан кийин карусельди автоматтык түрдө ойнойт. "Карусель" болсо, жүктөөдө карусельди автоматтык түрдө ойнойт. |
ороп | логикалык | чын | Карусель тынымсыз айланышы керекпи же катуу токтошу керекпи. |
Асинхрондук методдор жана өтүүлөр
Бардык API ыкмалары асинхрондуу жана өтүүнү баштайт . Алар чалуучуга өтүү башталаары менен, бирок ал бүтө электе кайтып келишет . Кошумчалай кетсек, өтүүчү компоненттеги ыкма чакырыгы этибарга алынбайт .
Көбүрөөк маалымат алуу үчүн биздин JavaScript документтерибизди караңыз.
Кошумча опциялар менен карусельди инициализациялайт object
жана буюмдарды аралай баштайт.
Карусель буюмдарын солдон оңго карай айлантыңыз.
Карусель буюмдарды айланып өтүүнү токтотот.
Карусельди белгилүү бир кадрга айлантат (0 негизинде, массивге окшош). Максаттуу нерсе көрсөтүлө электе (б.а. slid.bs.carousel
окуя болгонго чейин) чалуучуга кайтып келет.
Мурунку пунктка өтүү. Мурунку нерсе көрсөтүлө электе (б.а. окуя болгонго чейин) чалуучуга кайтат .slid.bs.carousel
Кийинки нерсеге өтүү. Кийинки нерсе көрсөтүлгөнгө чейин (б.а. окуя болгонго чейин) чалуучуга кайтат .slid.bs.carousel
Элементтин каруселин жок кылат.
Bootstrap'тин карусель классы карусель функциясына кирүү үчүн эки окуяны ачып берет. Эки окуя тең төмөнкү кошумча касиеттерге ээ:
direction
: Карусель жылып жаткан багыт (же"left"
же"right"
).relatedTarget
: Активдүү нерсе катары ордуна жылдырылып жаткан DOM элементи.from
: Учурдагы пункттун индексиto
: Кийинки пункттун индекси
Бардык карусель окуялары каруселдин өзүнө (б.а. ) тартылат <div class="carousel">
.
Окуя түрү | Description |
---|---|
слайд.б.карусель | Бул окуя slide инстанция ыкмасы чакырылганда дароо күйөт. |
slid.bs.carousel | Бул иш-чара карусель слайдды өткөрүп бүткөндөн кийин өчүрүлөт. |