Перайсці да асноўнага зместу Перайсці да навігацыі па дакументах
Check
in English

Карусель

Кампанент слайд-шоў для цыклічнага перамяшчэння элементаў — відарысаў або тэкставых слайдаў — як карусель.

На гэтай старонцы

Як гэта працуе

Карусель - гэта слайд-шоў для перамяшчэння па серыі змесціва, створанае з выкарыстаннем 3D-пераўтварэнняў CSS і трохі JavaScript. Ён працуе з серыямі малюнкаў, тэкстам або карыстацкай разметкай. Ён таксама ўключае падтрымку папярэдніх/наступных элементаў кіравання і індыкатараў.

У браўзерах, дзе падтрымліваецца API бачнасці старонкі , карусель пазбягае слізгацення, калі вэб-старонка не бачная карыстальніку (напрыклад, калі ўкладка браўзера неактыўная, акно браўзера згорнута і г.д.).

Анімацыйны эфект гэтага кампанента залежыць ад prefers-reduced-motionмедыя-запыту. Глядзіце раздзел аб паменшаным руху нашай дакументацыі па спецыяльных магчымасцях .

Майце на ўвазе, што ўкладзеныя каруселі не падтрымліваюцца, і каруселі звычайна не адпавядаюць стандартам даступнасці.

Прыклад

Каруселі не нармалізуюць памеры слайдаў аўтаматычна. Такім чынам, вам можа спатрэбіцца выкарыстоўваць дадатковыя ўтыліты або карыстальніцкія стылі для адпаведнага памеру кантэнту. Нягледзячы на ​​тое, што каруселі падтрымліваюць папярэднія/наступныя элементы кіравання і індыкатары, яны не з'яўляюцца абавязковымі. Дадавайце і наладжвайце, як лічыце патрэбным.

Клас .activeтрэба дадаць на адзін са слайдаў, інакш карусель не будзе бачная. Таксама не забудзьцеся ўсталяваць унікальны idдля .carouselдадатковых элементаў кіравання, асабліва калі вы выкарыстоўваеце некалькі каруселяў на адной старонцы. Элементы кіравання і індыкатара павінны мець data-bs-targetатрыбут (або hrefдля спасылак), які адпавядае idэлементу .carousel.

Толькі слайды

Вось толькі з горак карусель. Звярніце ўвагу на наяўнасць .d-blockі .w-100на карусельных відарысах, каб прадухіліць выраўноўванне браўзера па змаўчанні.

html 
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-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".

html 
<div id="carouselExampleControls" class="carousel slide" data-bs-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-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

З індыкатарамі

Вы таксама можаце дадаць індыкатары ў карусель разам з элементамі кіравання.

html 
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

З тытрамі

Лёгка дадавайце подпісы да слайдаў з дапамогай .carousel-captionэлемента ў любым .carousel-item. Іх можна лёгка схаваць у меншых акнах прагляду, як паказана ніжэй, з дапамогай дадатковых утыліт дысплея . Мы спачатку хаваем іх з дапамогай .d-noneі вяртаем іх на прыладах сярэдняга памеру з дапамогай .d-md-block.

html 
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Перакрыжаваны плынь

Дадайце .carousel-fadeў сваю карусель, каб анімаваць слайды з знікаючым пераходам замест слайда. У залежнасці ад змесціва вашай каруселі (напрыклад, слайды толькі з тэкстам), вы, магчыма, захочаце дадаць .bg-bodyабо некаторыя карыстальніцкія CSS у .carousel-items для правільнага перакрыжаванага плыву.

html 
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-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-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Дадайце data-bs-interval=""да a .carousel-item, каб змяніць колькасць часу затрымкі паміж аўтаматычным пераходам да наступнага элемента.

html 
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-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-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Адключыць сэнсарнае правядзенне

Каруселі падтрымліваюць правядзенне пальцам улева/управа на прыладах з сэнсарным экранам для перамяшчэння паміж слайдамі. Гэта можна адключыць з дапамогай data-bs-touchатрыбуту. Прыклад ніжэй таксама не ўключае data-bs-rideатрыбут, таму ён не запускаецца аўтаматычна.

html 
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="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-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Цёмны варыянт

Дадайце .carousel-darkда .carouselбольш цёмных элементаў кіравання, індыкатараў і подпісаў. Элементы кіравання былі перавернуты ў параўнанні са стандартнай белай заліўкай з filterуласцівасцю CSS. Надпісы і элементы кіравання маюць дадатковыя зменныя Sass, якія наладжваюць colorі background-color.

html 
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <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" data-bs-interval="2000">
      <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-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Карыстальніцкі пераход

Працягласць пераходу .carousel-itemможа быць зменена з дапамогай $carousel-transition-durationзменнай Sass перад кампіляцыяй або карыстацкіх стыляў, калі вы выкарыстоўваеце скампіляваны CSS. Калі ўжываецца некалькі пераходаў, пераканайцеся, што спачатку вызначаны пераход трансфармацыі (напрыклад, transition: transform 2s ease, opacity .5s ease-out).

Сас

Пераменныя

Зменныя для ўсіх каруселяў:

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

Зменныя для цёмнай каруселі :

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

Выкарыстанне

Праз атрыбуты дадзеных

Выкарыстоўвайце атрыбуты дадзеных, каб лёгка кіраваць становішчам каруселі. data-bs-slideпрымае ключавыя словы prevабо next, што змяняе становішча слайда адносна яго бягучага становішча. У якасці альтэрнатывы выкарыстоўвайце data-bs-slide-toдля перадачы неапрацаванага індэкса слайда ў карусель data-bs-slide-to="2", якая зрушвае пазіцыю слайда да пэўнага індэксу, які пачынаецца з0 .

Атрыбут data-bs-ride="carousel"выкарыстоўваецца, каб пазначыць карусель як аніміраваную, пачынаючы з загрузкі старонкі. Калі вы не выкарыстоўваеце data-bs-ride="carousel"для ініцыялізацыі вашай каруселі, вы павінны ініцыялізаваць яе самастойна. Яго нельга выкарыстоўваць у спалучэнні з (залішняй і непатрэбнай) відавочнай ініцыялізацыяй JavaScript той жа каруселі.

Праз JavaScript

Выклік каруселі ўручную з дапамогай:

const carousel = new bootstrap.Carousel('#myCarousel')

Параметры

Паколькі параметры можна перадаць праз атрыбуты даных або JavaScript, вы можаце дадаць імя параметра да data-bs-, як у data-bs-animation="{value}". Не забудзьцеся змяніць тып рэгістра назвы опцыі з « camelCase » на « kebab-case » пры перадачы опцый праз атрыбуты даных. Напрыклад, выкарыстоўваць data-bs-custom-class="beautifier"заместdata-bs-customClass="beautifier" .

Пачынаючы з Bootstrap 5.2.0, усе кампаненты падтрымліваюць эксперыментальны атрыбут зарэзерваваных даных data-bs-config, які можа змяшчаць простую канфігурацыю кампанента ў выглядзе радка JSON. Калі элемент мае атрыбуты data-bs-config='{"delay":0, "title":123}'і data-bs-title="456", канчатковае titleзначэнне будзе , 456а асобныя атрыбуты даных будуць перавызначаць значэнні, зададзеныя ў data-bs-config. Акрамя таго, існуючыя атрыбуты даных могуць змяшчаць такія значэнні JSON, як data-bs-delay='{"show":0,"hide":150}'.

Імя Тып Па змаўчанні Апісанне
interval лік 5000 Колькасць часу затрымкі паміж аўтаматычным цыклам элемента.
keyboard лагічны true Ці павінна карусель рэагаваць на падзеі клавіятуры.
pause радок, лагічны "hover" Калі ўстаноўлена "hover", прыпыняе цыкл каруселі на mouseenterі аднаўляе цыкл на mouseleave. Калі зададзена значэнне false, навядзенне курсора на карусель не прыпыніць яе. На сэнсарных прыладах, калі ўсталявана значэнне "hover", веласіпедны рух будзе прыпынены touchend(як толькі карыстальнік скончыць узаемадзеянне з каруселлю) на два інтэрвалы, перш чым аўтаматычна аднаўляцца. Гэта ў дадатак да паводзін мышы.
ride радок, лагічны false Калі зададзена значэнне true, карусель запускаецца аўтаматычна пасля таго, як карыстальнік уручную пераключае першы элемент. Калі ўстаноўлена значэнне "carousel", аўтаматычна запускае карусель пры загрузцы.
touch лагічны true Ці павінна карусель падтрымліваць узаемадзеянне правядзення пальцам улева/управа на прыладах з сэнсарным экранам.
wrap лагічны true Ці павінна карусель круціцца бесперапынна ці мець жорсткія прыпынкі.

Метады

Асінхронныя метады і пераходы

Усе метады API асінхронныя і пачынаюць пераход . Яны вяртаюцца да абанента, як толькі пачынаецца пераход, але да яго заканчэння . Акрамя таго, выклік метаду пераходнага кампанента будзе ігнаравацца .

Для атрымання дадатковай інфармацыі глядзіце нашу дакументацыю па JavaScript .

Вы можаце стварыць асобнік каруселі з дапамогай канструктара каруселі, напрыклад, для ініцыялізацыі дадатковымі опцыямі і пачатку пераходу па элементах:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Метад Апісанне
cycle Пераключаецца па элементах каруселі злева направа.
dispose Разбурае карусель элемента. (Выдаляе захаваныя даныя ў элеменце DOM)
getInstance Статычны метад, які дазваляе вам атрымаць асобнік каруселі, звязаны з элементам DOM, вы можаце выкарыстоўваць яго так: bootstrap.Carousel.getInstance(element).
getOrCreateInstance Статычны метад, які вяртае асобнік каруселі, звязаны з элементам DOM, або стварае новы, калі ён не быў ініцыялізаваны. Вы можаце выкарыстоўваць гэта так: bootstrap.Carousel.getOrCreateInstance(element).
next Пераход да наступнага элемента. Вяртаецца да абанента да таго, як будзе паказаны наступны элемент (напрыклад, да slid.bs.carouselпадзеі).
nextWhenVisible Не пераключайце карусель да наступнай, калі старонка не бачная або карусель ці яе бацькоўскі элемент не бачны. Вяртаецца да абанента да таго, як будзе паказаны мэтавы элемент .
pause Спыняе пераход каруселі паміж прадметамі.
prev Пераход да папярэдняга элемента. Вяртаецца да абанента да таго, як будзе паказаны папярэдні элемент (напрыклад, да slid.bs.carouselпадзеі).
to Пераключае карусель на пэўны кадр (на аснове 0, падобна да масіва). Вяртаецца да абанента да таго, як будзе паказаны мэтавы элемент (напрыклад, да таго, як slid.bs.carouselадбудзецца падзея).

Падзеі

Клас каруселі Bootstrap паказвае дзве падзеі для падлучэння да функцыянальнасці каруселі. Абедзве падзеі маюць наступныя дадатковыя ўласцівасці:

  • direction: Напрамак, у якім слізгае карусель ( "left"або "right").
  • relatedTarget: Элемент DOM, які ўстаўляецца на месца як актыўны элемент.
  • from: Індэкс бягучага элемента
  • to: Індэкс наступнага элемента

Усе падзеі каруселі запускаюцца ў самой каруселі (г.зн. у <div class="carousel">).

Тып падзеі Апісанне
slid.bs.carousel Спрацоўвае, калі карусель завяршыла свой пераход.
slide.bs.carousel Спрацоўвае неадкладна, калі slideвыклікаецца метад асобніка. 
const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})