Карусель

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

Бул бетте

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

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

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

Crossfade

.carousel-fadeСлайддын ордуна өчүп өтүү менен слайддарды жандандыруу үчүн каруселиңизге кошуңуз . Каруселиңиздин мазмунуна жараша (мисалы, текст гана слайддар), туура кайчылаш үчүн s .bg-body-га же кандайдыр бир ыңгайлаштырылган CSS кошкуңуз келиши мүмкүн ..carousel-item

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>

Жеке `.carousel-item`интервал

Кийинки нерсеге автоматтык түрдө өтүү ортосундагы кечигүү убактысын өзгөртүү үчүн aга data-bs-interval=""кошуңуз ..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Башкаруу элементтери filterCSS касиети менен демейки ак толтуруудан айланды. Коштомо жазууларда жана башкаруу элементтеринде 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>

Ыңгайлаштырылган өтүү

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

Sass

Өзгөрмөлөр

Бардык карусельдер үчүн өзгөрмөлөр:

$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ачкыч сөздөрүн кабыл алат , бул слайддын абалын учурдагы абалына карата өзгөртөт. Же болбосо, слайддын абалын карусельге өткөрүү үчүн колдонуңуз , ал слайддын абалын менен башталган белгилүү бир индекске жылдырат .prevnextdata-bs-slide-todata-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 версиясында, бардык компоненттер JSON сап катары жөнөкөй компонент конфигурациясын камтый турган эксперименталдык сакталган маалымат атрибутун колдойт. data-bs-configЭлементте data-bs-config='{"delay":0, "title":123}'жана data-bs-title="456"атрибуттары болгондо, акыркы titleмаани болот 456жана өзүнчө маалымат атрибуттары берилген маанилерди жокко чыгарат data-bs-config. Мындан тышкары, учурдагы маалымат атрибуттары сыяктуу JSON маанилерин жайгаштыра алат data-bs-delay='{"show":0,"hide":150}'.

аты	Type	Демейки	Description
`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
})

Метод	Description
`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">.

Окуя түрү	Description
`slid.bs.carousel`	Карусель слайдды өткөрүп бүткөндөн кийин иштетилди.
`slide.bs.carousel`	`slide`Инстанция ыкмасы чакырылганда дароо күйөт.

const myCarousel = document.getElementById('myCarousel')

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

Карусель

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

Мисал

Слайддар гана

Башкаруу менен

Индикаторлор менен

Коштомо жазуулар менен

Биринчи слайд энбелгиси

Экинчи слайд энбелгиси

Үчүнчү слайд энбелгиси

Crossfade

Жеке .carousel-itemинтервал

Тийип сүрүүнү өчүрүү

Кара вариант

Биринчи слайд энбелгиси

Экинчи слайд энбелгиси

Үчүнчү слайд энбелгиси

Ыңгайлаштырылган өтүү

Sass

Өзгөрмөлөр

Колдонуу

Маалымат атрибуттары аркылуу

JavaScript аркылуу

Параметрлер

Методдор

Асинхрондук методдор жана өтүүлөр

Окуялар

Жеке `.carousel-item`интервал