קעראַסעל

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

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

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

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

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

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

קראָספאַדע

לייג .carousel-fadeצו דיין קעראַסעל צו ופלעבן סליידז מיט אַ וועלקן יבערגאַנג אַנשטאָט פון אַ רוק. דעפּענדינג אויף דיין קעראַסעל אינהאַלט (למשל, טעקסט בלויז סליידז), איר קען וועלן צו לייגן .bg-bodyאָדער עטלעכע מנהג CSS צו די .carousel-items פֿאַר געהעריק קראָסספאַדינג.

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=""צו אַ .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>

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

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

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

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

const carousel = new bootstrap.Carousel('#myCarousel')

אָפּציעס

ווי אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט, איר קענען לייגן אַן אָפּציע נאָמען צו data-bs-, ווי אין data-bs-animation="{value}". מאַכן זיכער צו טוישן די פאַל טיפּ פון די אָפּציע נאָמען פון " camelCase " צו " קעבאַב פאַל " ווען איר פאָרן די אָפּציעס דורך דאַטן אַטריביוץ. פֿאַר בייַשפּיל, נוצן data-bs-custom-class="beautifier"אַנשטאָט פון data-bs-customClass="beautifier".

זינט Bootstrap 5.2.0, אַלע קאַמפּאָונאַנץ שטיצן אַן יקספּערמענאַל רעזערווירט דאַטן אַטריביוט data-bs-configוואָס קענען זיין אַ פּשוט קאָמפּאָנענט קאַנפיגיעריישאַן ווי אַ JSON שטריקל. ווען אַן עלעמענט האט 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`	בוליאַן	`true`	צי די קעראַסעל זאָל רעאַגירן צו קלאַוויאַטור געשעענישן.
`pause`	שטריקל, בוליאַן	`"hover"`	אויב שטעלן צו `"hover"`, פּאָזאַז די סייקלינג פון די קעראַסעל אויף `mouseenter`און ריסומז די סייקלינג פון די קעראַסעל אויף `mouseleave`. אויב שטעלן צו `false`, כאַווערינג איבער די קעראַסעל וועט נישט פּויזע עס. אויף פאַרבינדן-ענייבאַלד דעוויסעס, ווען שטעלן צו `"hover"`, סייקלינג וועט פּויזע אויף `touchend`(אַמאָל דער באַניצער פאַרטיק ינטעראַקטינג מיט די קעראַסעל) פֿאַר צוויי ינטערוואַלז, איידער אויטאָמאַטיש ריזומינג. דאָס איז אין דערצו צו די מויז נאַטור.
`ride`	שטריקל, בוליאַן	`false`	אויב באַשטימט צו `true`, אַוטאָפּלייז די קעראַסעל נאָך דער באַניצער מאַניואַלי סייקאַלז דער ערשטער נומער. אויב שטעלן צו `"carousel"`, אַוטאָפּלייז די קעראַסעל אויף מאַסע.
`touch`	בוליאַן	`true`	צי די קעראַסעל זאָל שטיצן לינקס / רעכט לאַקכענען ינטעראַקשאַנז אויף טאָוטשסקרעען דעוויסעס.
`wrap`	בוליאַן	`true`	צי די קעראַסעל זאָל קאַנטיניואַסלי ציקל אָדער האָבן שווער סטאַפּס.

מעטהאָדס

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

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

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

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

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`געשעעניש אַקערז).

געשעענישן

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-itemינטערוואַל

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

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

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

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

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

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

סאַס

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

באַניץ

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

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

אָפּציעס

מעטהאָדס

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

געשעענישן

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