in English

Карусель

Карусель сыяктуу элементтерди (сүрөттөрдү же тексттин слайддарын) айланып өтүү үчүн слайдшоу компоненти.

Бул кантип иштейт

Карусель - бул CSS 3D трансформациялары жана бир аз JavaScript менен курулган бир катар мазмундар боюнча велосипед тебүү үчүн слайдшоу. Ал бир катар сүрөттөр, текст же ыңгайлаштырылган белгилөө менен иштейт. Ал ошондой эле мурунку/кийинки башкаруу жана көрсөткүчтөрдү колдоону камтыйт.

Page Visibility 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>

Crossfade

.carousel-fadeСлайддын ордуна өчүп өтүү менен слайддарды жандандыруу үчүн каруселиңизге кошуңуз . Каруселиңиздин мазмунуна жараша (мисалы, тексттик гана слайддар), туура кайчылаш үчүн s .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>

Кийинки нерсеге автоматтык түрдө өтүү ортосундагы кечигүү убактысын өзгөртүү үчүн aга data-interval=""кошуңуз ..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ачкыч сөздөрүн кабыл алат , бул слайддын абалын учурдагы абалына карата өзгөртөт. Же болбосо, слайддын абалын карусельге өткөрүү үчүн колдонуңуз , ал слайддын абалын менен башталган белгилүү бир индекске жылдырат .prevnextdata-slide-todata-slide-to="2"0

data-ride="carousel"Атрибуту карусельди бет жүктөлгөндөн баштап анимациялоочу катары белгилөө үчүн колдонулат . data-ride="carousel"Эгер сиз каруселиңизди инициализациялоо үчүн колдонбосоңуз , аны өзүңүз башташыңыз керек. Аны бир эле каруселдин ачык-айкын JavaScript инициализациясы менен бирге колдонууга болбойт.

JavaScript аркылуу

Каруселге кол менен чалуу:

$('.carousel').carousel()

Параметрлер

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-, сыяктуу эле кошуңуз data-interval="".

аты Type Демейки Description
интервал саны 5000 Нерсени автоматтык түрдө айлантуунун ортосундагы кечигүү убактысы. болсо false, карусель автоматтык түрдө айланбайт.
клавиатура логикалык чын Карусель клавиатурадагы окуяларга жооп бериши керекпи.
тыныгуу string | логикалык 'hover'

Эгер коюлса 'hover', каруселдин айлануусун тындырат mouseenterжана карусельди айлантууну кайра улантат mouseleave. деп коюлса false, каруселдин үстүнө меңзеп коюу аны тындырбайт.

Тийүү иштетилген түзмөктөрдө, күйгүзүлгөндө 'hover', велосипед тебүү touchendавтоматтык түрдө уланардан мурун (колдонуучу карусель менен иштешүүнү аяктагандан кийин) эки аралыкка тындырылат. Бул жогоруда чычкан жүрүм-турумуна кошумча экенин белгилей кетүү керек.
минүү сап жалган Колдонуучу биринчи нерсени кол менен айланткандан кийин карусельди автоматтык түрдө ойнойт. Эгер коюлса '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">.

Окуя түрү Description
слайд.б.карусель Бул окуя slideинстанция ыкмасы чакырылганда дароо күйөт.
slid.bs.carousel Бул иш-чара карусель слайдды өткөрүп бүткөндөн кийин өчүрүлөт. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

Өтүү мөөнөтүн өзгөртүү

Өткөөлдүн узактыгы компиляциядан мурун Sass өзгөрмөсү .carousel-itemменен өзгөртүлүшү мүмкүн $carousel-transitionже эгерде сиз компиляцияланган CSS колдонуп жатсаңыз, ыңгайлаштырылган стилдер. Эгер бир нече өтүү колдонулса, адегенде трансформацияга өтүү аныкталганын текшериңиз (мисалы. transition: transform 2s ease, opacity .5s ease-out).