Карусель

Карусель гэх мэт зураг эсвэл текстийн слайдуудыг хооронд нь эргүүлэхэд зориулсан слайд шоуны бүрэлдэхүүн хэсэг.

Энэ хуудсан дээр

Хэрхэн ажилладаг

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

Page Visibility API дэмждэг хөтчүүдэд вэб хуудас нь хэрэглэгчдэд харагдахгүй үед (жишээ нь хөтчийн таб идэвхгүй, хөтчийн цонх багассан гэх мэт) тойруулга гулсахаас зайлсхийх болно.

Энэ бүрэлдэхүүн хэсгийн хөдөлгөөнт эффект нь prefers-reduced-motionмедиа асуулгаас хамаарна. Манай хүртээмжтэй байдлын баримт бичгийн хөдөлгөөнийг багасгасан хэсгийг үзнэ үү .

Дотор тойруулгыг дэмждэггүй бөгөөд тойруулгууд нь ерөнхийдөө хүртээмжийн стандартад нийцдэггүй гэдгийг анхаарна уу.

Жишээ

Карусель нь слайдын хэмжээг автоматаар хэвийн болгодоггүй. Тиймээс та агуулгыг зохих хэмжээгээр тохируулахын тулд нэмэлт хэрэгсэл эсвэл тусгай хэв маягийг ашиглах шаардлагатай болж магадгүй юм. Карусель нь өмнөх/дараагийн удирдлага болон үзүүлэлтүүдийг дэмждэг ч тодорхой шаардлагагүй. Өөрийн үзэмжээр нэмж, тохируулаарай.

Ангиудыг .activeслайдын аль нэгэнд нэмэх шаардлагатай, эс тэгвээс тойруулга харагдахгүй. Түүнчлэн , хэрэв та нэг хуудсан дээр олон тойруулгыг ашиглаж байгаа бол нэмэлт удирдлагад idөвөрмөц тохиргоог хийхээ мартуузай . .carouselХяналтын болон заагч элементүүд нь тухайн элементтэй тохирох data-bs-targetшинж чанартай (эсвэл hrefхолбоосын хувьд) байх ёстой .id.carousel

Зөвхөн слайд

Энд зөвхөн слайдтай тойруулга байна. Хөтөч дээр өгөгдмөл зураг зэрэгцүүлэхээс сэргийлэхийн тулд тойргийн зураг байгаа .d-blockэсэхийг анхаарна уу ..w-100

<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"

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

Шалгуур үзүүлэлтүүдтэй

Та мөн хяналтын хэсгүүдийн хажууд индикаторуудыг тойруулгад нэмж болно.

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

Эхний слайд шошго

Эхний слайдын зарим төлөөллийн орлуулагчийн контент.

Хоёрдахь слайд шошго

Хоёр дахь слайдын зарим төлөөллийн орлуулагчийн контент.

Гурав дахь слайд шошго

Гурав дахь слайдын зарим төлөөллийн орлуулагчийн контент.

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
  <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Слайдын оронд бүдгэрүүлэх шилжилттэй слайдуудыг хөдөлгөөнт болгохын тулд тойруулангаа нэмнэ үү .

<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`интервал

Дараагийн зүйл рүү автоматаар шилжих хооронд саатах хугацааг өөрчлөхийн data-bs-interval=""тулд a дээр нэмнэ үү ..carousel-item

<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атрибут data-bs-interval="false"агуулаагүй тул автоматаар тоглуулахгүй.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-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-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Тайлбар болон хяналтууд нь болон тохиргоог өөрчлөх нэмэлт Sass хувьсагчтай background-color.

Эхний слайд шошго

Эхний слайдын зарим төлөөллийн орлуулагчийн контент.

Хоёрдахь слайд шошго

Хоёр дахь слайдын зарим төлөөллийн орлуулагчийн контент.

Гурав дахь слайд шошго

Гурав дахь слайдын зарим төлөөллийн орлуулагчийн контент.

<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 хувьсагчаар эсвэл эмхэтгэсэн CSS ашиглаж байгаа бол өөрчлөн хэв маягаар өөрчилж болно .carousel-item. $carousel-transition-durationХэрэв олон шилжилт хэрэглэсэн бол эхлээд хувиргах шилжилтийг тодорхойлсон эсэхийг шалгана уу (жишээ нь. 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түлхүүр үгсийг хүлээн авдаг бөгөөд энэ нь слайдын байрлалыг одоогийн байрлалтай нь харьцуулан өөрчилдөг. Эсвэл слайдын байрлалыг -ээр эхэлсэн тодорхой индекс рүү шилжүүлдэг тойруулга руу түүхий слайдын индексийг дамжуулахын тулд ашиглана уу .prevnextdata-bs-slide-todata-bs-slide-to="2"0

Энэ data-bs-ride="carousel"атрибутыг хуудас ачаалж эхлэх үед тойруулгыг хөдөлгөөнт гэж тэмдэглэхэд ашигладаг. Хэрэв та data-bs-ride="carousel"тойруулаа эхлүүлэхийн тулд ашигладаггүй бол өөрөө эхлүүлэх хэрэгтэй. Үүнийг ижил тойруулгыг JavaScript-ийн илэрхий эхлүүлэхтэй (илүүдэл ба шаардлагагүй) хослуулан ашиглах боломжгүй.

JavaScript-ээр дамжуулан

Дараахаар тойруулгыг гараар дууд:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)

Сонголтууд

Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулж болно. Өгөгдлийн шинж чанаруудын хувьд сонголтын нэрийг -д data-bs-хавсаргана data-bs-interval="".

Нэр	Төрөл	Өгөгдмөл	Тодорхойлолт
`interval`	тоо	`5000`	Тухайн зүйлийг автоматаар эргүүлэх хооронд саатах хугацаа. Хэрэв `false`бол тойруулга автоматаар эргэхгүй.
`keyboard`	логик	`true`	Тойрог гарны үйл явдалд хариу үйлдэл үзүүлэх эсэх.
`pause`	мөр \| логик	`'hover'`	Хэрэв гэж тохируулсан бол `'hover'`тойруулалтын дугуйг түр зогсоож, эргүүлэх хөдөлгөөнийг асаалттай `mouseenter`үргэлжлүүлнэ `mouseleave`. Хэрэв гэж тохируулсан бол `false`тойруулуур дээр хулганыг түр зогсоохгүй. Мэдрэгчтэй төхөөрөмжүүд дээр, гэж тохируулсан үед `'hover'`дугуйн хөдөлгөөнийг автоматаар үргэлжлүүлэхийн өмнө хоёр интервалаар түр зогсооно `touchend`(хэрэглэгч тойруулгатай харьцаж дууссаны дараа). Энэ нь дээр дурдсан хулганы зан үйлээс гадна гэдгийг анхаарна уу.
`ride`	мөр \| логик	`false`	Хэрэглэгч эхний зүйлийг гараар эргүүлсний дараа тойруулгыг автоматаар тоглуулна. Хэрэв гэж тохируулсан бол `'carousel'`ачааллын үед тойруулгыг автоматаар тоглуулна.
`wrap`	логик	`true`	Тойрог тасралтгүй эргэлдэх үү, эсвэл хатуу зогсолттой байх уу.
`touch`	логик	`true`	Тойрог нь мэдрэгчтэй дэлгэцийн төхөөрөмжүүд дээр зүүн/баруун шудрах харилцан үйлдлийг дэмжих ёстой эсэх.

Арга зүй

Асинхрон аргууд ба шилжилтүүд

Бүх API аргууд асинхрон бөгөөд шилжилтийг эхлүүлнэ . Шилжилт эхэлмэгц дуусаагүй байхад тэд залгагч руу буцаж ирдэг . Нэмж хэлэхэд, шилжилтийн бүрэлдэхүүн хэсэг дэх аргын дуудлагыг үл тоомсорлох болно.

Дэлгэрэнгүй мэдээллийг манай JavaScript баримтаас үзнэ үү .

Та тойруулгыг үүсгэгчээр үүсгэж болно, жишээлбэл, нэмэлт сонголтуудыг эхлүүлж, зүйлсээр эргэлдэж эхлэх боломжтой:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 2000,
  wrap: false
})

Арга	Тодорхойлолт
`cycle`	Зүүнээс баруун тийш тойруулгыг эргүүлнэ.
`pause`	Тойрог эд зүйлсээр эргэлдэхийг зогсооно.
`prev`	Өмнөх зүйл рүү шилжих. Өмнөх зүйлийг харуулахаас өмнө (жишээ нь, `slid.bs.carousel`үйл явдал болохоос өмнө) дуудагч руу буцна.
`next`	Дараагийн зүйл рүү шилжих. Дараагийн зүйлийг харуулахаас өмнө (жишээ нь `slid.bs.carousel`үйл явдал болохоос өмнө) дуудагч руу буцна.
`nextWhenVisible`	Хуудас харагдахгүй эсвэл тойруулга эсвэл түүний эцэг эх харагдахгүй үед тойруулгыг дараагийнх руу бүү шилжүүл. Зорилтот зүйлийг харуулахаас өмнө дуудагч руу буцна
`to`	Тойрог тойргийг тодорхой хүрээ рүү эргэлддэг (массивтэй төстэй 0 дээр суурилсан). Зорилтот зүйлийг харуулахаас өмнө (жишээ нь `slid.bs.carousel`үйл явдал болохоос өмнө) дуудагч руу буцна.
`dispose`	Элементийн тойруулгыг устгадаг. (DOM элемент дээр хадгалагдсан өгөгдлийг устгана)
`getInstance`	DOM элементтэй холбоотой тойруулгын жишээг авах боломжийг олгодог статик арга, та үүнийг дараах байдлаар ашиглаж болно:`bootstrap.Carousel.getInstance(element)`
`getOrCreateInstance`	DOM элементтэй холбоотой тойруулгын жишээг буцаадаг статик арга эсвэл үүнийг эхлүүлээгүй тохиолдолд шинээр үүсгэх. Та үүнийг дараах байдлаар ашиглаж болно.`bootstrap.Carousel.getOrCreateInstance(element)`

Үйл явдал

Bootstrap-ийн тойруулгын анги нь тойруулгын функцэд холбогдох хоёр үйл явдлыг харуулдаг. Хоёр үйл явдал нь дараахь нэмэлт шинж чанартай байдаг.

direction: Тойрог гулсаж буй чиглэл ( "left"эсвэл "right").
relatedTarget: Идэвхтэй зүйл болгон байрлуулж буй DOM элемент.
from: Одоогийн зүйлийн индекс
to: Дараагийн зүйлийн индекс

Бүх тойруулгын үйл явдлуудыг тойруулгыг өөрөө (өөрөөр хэлбэл <div class="carousel">).

Үйл явдлын төрөл	Тодорхойлолт
`slide.bs.carousel`	`slide`Инстанцийн аргыг дуудах үед шууд асаана.
`slid.bs.carousel`	Тойрог гулсуурын шилжилтийг дуусгах үед галладаг.

var myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', function () {
  // do something...
})

Карусель

Хэрхэн ажилладаг

Жишээ

Зөвхөн слайд

Удирдлагатай

Шалгуур үзүүлэлтүүдтэй

Тайлбартай

Эхний слайд шошго

Хоёрдахь слайд шошго

Гурав дахь слайд шошго

Crossfade

Хувь хүний .carousel-item​​интервал

Хүрч шударахыг идэвхгүй болгох

Харанхуй хувилбар

Эхний слайд шошго

Хоёрдахь слайд шошго

Гурав дахь слайд шошго

Захиалгат шилжилт

Сасс

Хувьсагч

Хэрэглээ

Өгөгдлийн шинж чанаруудаар дамжуулан

JavaScript-ээр дамжуулан

Сонголтууд

Арга зүй

Асинхрон аргууд ба шилжилтүүд

Үйл явдал

Хувь хүний `.carousel-item`интервал