קעראַסעל

א סלידעשאָוו קאָמפּאָנענט פֿאַר סייקלינג דורך עלעמענטן - בילדער אָדער סליידז פון טעקסט - ווי אַ קעראַסעל.

אויף דעם בלאַט

וויאזוי עס ארבעט

די קעראַסעל איז אַ סלידעשאָוו פֿאַר סייקלינג דורך אַ סעריע פון אינהאַלט, געבויט מיט CSS 3D טראַנספאָרמז און אַ ביסל פון דזשאַוואַסקריפּט. עס אַרבעט מיט אַ סעריע פון בילדער, טעקסט אָדער מנהג מאַרקאַפּ. עס אויך כולל שטיצן פֿאַר פרייַערדיק / ווייַטער קאָנטראָלס און ינדיקאַטאָרס.

אין בראַוזערז ווו די בלאַט וויסיביליטי אַפּי איז געשטיצט, די קעראַסעל וועט ויסמיידן סליידינג ווען די וועב בלאַט איז ניט קענטיק פֿאַר דער באַניצער (אַזאַ ווי ווען דער בלעטערער קוויטל איז ינאַקטיוו, די בלעטערער פֿענצטער איז מינאַמייזד, אאז"ו ו).

די אַנאַמיישאַן ווירקונג פון דעם קאָמפּאָנענט איז אָפענגיק אויף די 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>

קראָספאַדע

לייג .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=""צו אַ .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און 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>

מנהג יבערגאַנג

די יבערגאַנג געדויער פון .carousel-itemקענען זיין טשיינדזשד מיט די $carousel-transition-durationסאַסס בייַטעוודיק איידער קאַמפּיילינג אָדער מנהג סטיילז אויב איר נוצן די קאַמפּיילד 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"ינישאַלייז דיין קעראַסעל, איר מוזן יניטיאַליזירן עס זיך. עס קענען ניט זיין געוויינט אין קאָמבינאַציע מיט (יבעריק און ומנייטיק) יקספּליסאַט דזשאַוואַסקריפּט יניטיאַליזאַטיאָן פון דער זעלביקער קעראַסעל.

דורך דזשאַוואַסקריפּט

רופן קעראַסעל מאַניואַלי מיט:

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

אָפּציעס

אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. פֿאַר דאַטן אַטריביוץ, צולייגן די אָפּציע נאָמען צו 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`	צי די קעראַסעל זאָל שטיצן לינקס / רעכט לאַקכענען ינטעראַקשאַנז אויף טאָוטשסקרעען דעוויסעס.

מעטהאָדס

אַסינטשראָנאָוס מעטהאָדס און טראַנזישאַנז

אַלע אַפּי מעטהאָדס זענען ייסינגקראַנאַס און אָנהייבן אַ יבערגאַנג . זיי צוריקקומען צו די קאַללער ווי באַלד ווי די יבערגאַנג איז סטאַרטעד אָבער איידער עס ענדס . אין אַדישאַן, אַ מעטאָד רופן אויף אַ יבערגאַנג קאָמפּאָנענט וועט זיין איגנאָרירט .

זען אונדזער דזשאַוואַסקריפּט דאַקיומענטיישאַן פֿאַר מער אינפֿאָרמאַציע .

איר קענען מאַכן אַ קעראַסעל בייַשפּיל מיט די קעראַסעל קאַנסטראַקטער, פֿאַר בייַשפּיל, צו ינישאַלייז מיט נאָך אָפּציעס און אָנהייבן סייקלינג דורך זאכן:

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

קעראַסעל

וויאזוי עס ארבעט

בייַשפּיל

בלויז סליידז

מיט קאָנטראָלס

מיט ינדיקאַטאָרס

מיט קאַפּיטאַליז

ערשטער רוק פירמע

צווייטע רוק פירמע

דריט רוק פירמע

קראָספאַדע

יחיד .carousel-itemינטערוואַל

דיסייבאַל ריר סוויפּינג

טונקל וואַריאַנט

ערשטער רוק פירמע

צווייטע רוק פירמע

דריט רוק פירמע

מנהג יבערגאַנג

סאַס

וועריאַבאַלז

באַניץ

דורך דאַטן אַטריביוץ

דורך דזשאַוואַסקריפּט

אָפּציעס

מעטהאָדס

אַסינטשראָנאָוס מעטהאָדס און טראַנזישאַנז

געשעענישן

יחיד `.carousel-item`ינטערוואַל