Карусель
Кампанент слайд-шоў для цыклічнага перамяшчэння элементаў — відарысаў або тэкставых слайдаў — як карусель.
Як гэта працуе
Карусель - гэта слайд-шоў для перамяшчэння па серыі змесціва, створанае з выкарыстаннем 3D-пераўтварэнняў CSS і трохі JavaScript. Ён працуе з серыямі малюнкаў, тэкстам або карыстацкай разметкай. Ён таксама ўключае падтрымку папярэдніх/наступных элементаў кіравання і індыкатараў.
У браўзерах, дзе падтрымліваецца API бачнасці старонкі , карусель пазбягае слізгацення, калі вэб-старонка не бачная карыстальніку (напрыклад, калі ўкладка браўзера неактыўная, акно браўзера згорнута і г.д.).
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>
Перакрыжаваны плынь
Дадайце .carousel-fade
ў сваю карусель, каб анімаваць слайды з знікаючым пераходам замест слайда. У залежнасці ад змесціва вашай каруселі (напрыклад, слайды толькі з тэкстам), вы, магчыма, захочаце дадаць .bg-body
або некаторыя карыстальніцкія CSS у .carousel-item
s для правільнага перакрыжаванага плыву.
<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.bs.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
).