Carousel

ئېلېمېنتلار ئارقىلىق ۋېلىسىپىت مىنىشنىڭ تام تەسۋىر زاپچاسلىرى - رەسىم ياكى تېكىست تام تەسۋىرلىرى كارۇسېلغا ئوخشاش.

بۇ بەتتە

قانداق ئىشلەيدۇ

كارۇسېل ۋېلىسىپىت مىنىشنىڭ بىر يۈرۈش مەزمۇنلىرى بولۇپ ، 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`ئارىلىق

ئاپتوماتىك ۋېلىسىپىت مىنىشنىڭ كېيىنكى تۈرگە كېچىكتۈرۈش ۋاقتىنى ئۆزگەرتىش 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كۆرسەتكۈچ ۋە ئىزاھلارغا قاراڭ. كونتروللار سۈكۈتتىكى ئاق تولدۇرۇشتىن filterCSS خاسلىقى بىلەن ئۆزگەرتىلدى. colorئىزاھ ۋە كونتروللارنىڭ قوشۇمچە Sass ئۆزگەرگۈچى مىقدارلىرى بار 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>

Custom transition

ئەگەر سىز تۈزۈلگەن CSS نى ئىشلىتىۋاتقان بولسىڭىز ، Sass ئۆزگەرگۈچى مىقدارنى .carousel-itemئۆزگەرتىشتىن بۇرۇن ياكى خاس ئۇسلۇبنى ئۆزگەرتىشكە بولىدۇ . $carousel-transition-durationئەگەر كۆپ خىل ئۆتكۈنچى قوللىنىلسا ، ئالدى بىلەن ئۆزگەرتىشنىڭ ئېنىقلانغانلىقىنى جەزملەشتۈرۈڭ (مەسىلەن 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ئاچقۇچلۇق سۆزلەرنى قوبۇل قىلىدۇ 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}". تاللاش خاسلىقى ئارقىلىق تاللاش نامىنى «تۆگە دېلوسى» دىن «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}'.

ئىسمى	تىپ	سۈكۈتتىكى	چۈشەندۈرۈش
`interval`	سان	`5000`	بىر نەرسىنى ئاپتوماتىك ۋېلىسىپىت مىنىشنىڭ كېچىكىش ۋاقتى.
`keyboard`	boolean	`true`	كارۇسېل كۇنۇپكا تاختىسىدىكى ھادىسىلەرگە ئىنكاس قايتۇرامدۇ يوق.
`pause`	string, boolean	`"hover"`	تەڭشەلسە `"hover"`، كارۇسېلنىڭ ۋېلىسىپىت مىنىشنى توختىتىدۇ `mouseenter`ۋە كارۇسېلنىڭ ۋېلىسىپىت مىنىشنى ئەسلىگە كەلتۈرىدۇ `mouseleave`. تەڭشەلسە `false`، كارۇسېل ئۈستىدە لەيلەپ توختاپ قالمايدۇ. سېزىمچان ئۈسكۈنىلەردە تەڭشەلگەندە `"hover"`، ۋېلىسىپىت مىنىش `touchend`(ئىشلەتكۈچى كارۇسېل بىلەن ئۆز-ئارا تەسىرنى تۈگەتكەندىن كېيىن) ئىككى قېتىم توختاپ ، ئاپتوماتىك ئەسلىگە كېلىدۇ. بۇ چاشقىنەكنىڭ ھەرىكىتىدىن باشقا.
`ride`	string, boolean	`false`	تەڭشەلگەن بولسا `true`، ئىشلەتكۈچى بىرىنچى تۈرنى قولدا ئايلاندۇرغاندىن كېيىن كارۇسېلنى ئاپتوماتىك ھەيدەيدۇ. تەڭشەلگەن بولسا `"carousel"`، كارۇسېلنى يۈككە ئاپتوماتىك ھەيدەيدۇ.
`touch`	boolean	`true`	كارۇسېل سېزىمچان ئېكران ئۈسكۈنىلىرىدە سول / ئوڭ سۈرتۈش ئۆز-ئارا تەسىر كۆرسىتىشنى قوللامدۇ يوق.
`wrap`	boolean	`true`	كارۇسېل ئۇدا ئايلىنىشى كېرەكمۇ ياكى قاتتىق توختاپ قېلىش كېرەكمۇ.

Methods

ماس قەدەمسىز ئۇسۇل ۋە ئۆتكۈنچى

بارلىق 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`ۋەقە يۈز بېرىشتىن بۇرۇن).

Events

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...
})

Carousel

قانداق ئىشلەيدۇ

مىسال

پەقەت تام تەسۋىر

كونترول بىلەن

كۆرسەتكۈچ بىلەن

ئىزاھلار بىلەن

بىرىنچى تام تەسۋىر بەلگىسى

ئىككىنچى تام تەسۋىر بەلگىسى

ئۈچىنچى تام تەسۋىر بەلگىسى

Crossfade

يەككە .carousel-itemئارىلىق

چەكمە سۈرتۈشنى چەكلەڭ

قاراڭغۇ ۋارىيانت

بىرىنچى تام تەسۋىر بەلگىسى

ئىككىنچى تام تەسۋىر بەلگىسى

ئۈچىنچى تام تەسۋىر بەلگىسى

Custom transition

Sass

ئۆزگەرگۈچى مىقدار

ئىشلىتىش

سانلىق مەلۇمات خاسلىقى ئارقىلىق

JavaScript ئارقىلىق

تاللانما

Methods

ماس قەدەمسىز ئۇسۇل ۋە ئۆتكۈنچى

Events

يەككە `.carousel-item`ئارىلىق