קעראַסעל

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

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

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

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

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

לעסאָף, אויב איר בויען אונדזער דזשאַוואַסקריפּט פֿון מקור, עס ריקווייערזutil.js .

בייַשפּיל

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

די .activeקלאַס דאַרף זיין מוסיף צו איינער פון די סליידז אַנדערש די קעראַסעל וועט נישט זיין קענטיק. אויך זיין זיכער צו שטעלן אַ יינציק שייַן .carouselפֿאַר אַפּשאַנאַל קאָנטראָלס, ספּעציעל אויב איר נוצן קייפל קעראַסאַלז אויף אַ איין בלאַט. קאָנטראָל און גראדן עלעמענטן מוזן האָבן אַ data-targetאַטריביוט (אָדער hrefפֿאַר לינקס) וואָס גלייַכן די שייַן פון די .carouselעלעמענט.

בלויז סליידז

דאָ איז אַ קעראַסעל בלויז מיט סליידז. באַמערקונג די בייַזייַן פון די .d-blockאון .w-100אויף קעראַסעל בילדער צו פאַרמייַדן בלעטערער פעליקייַט בילד אַליינמאַנט.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
</div>

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

אַדינג אין די פריערדיקע און ווייַטער קאָנטראָלס:

פֿריִערדיקע ווייַטער

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

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

איר קענען אויך לייגן די ינדיקאַטאָרס צו די קעראַסעל צוזאמען די קאָנטראָלס.

פֿריִערדיקע ווייַטער

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

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

לייג קאַפּשאַנז צו דיין סליידז לייכט מיט דעם .carousel-captionעלעמענט אין קיין .carousel-item. זיי קענען זיין לייכט פאַרבאָרגן אויף קלענערער וויופּאָרץ, ווי געוויזן אונטן, מיט אַפּשאַנאַל אַרויסווייַזן יוטילאַטיז . מיר באַהאַלטן זיי טכילעס מיט .d-noneאון ברענגען זיי צוריק אויף מיטל-סייזד דעוויסעס מיט .d-md-block.

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

Nulla vitae elit libero, a pharetra augue mollis interdum.

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

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

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

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

פֿריִערדיקע ווייַטער

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

קראָספאַדע

לייג .carousel-fadeצו דיין קעראַסעל צו ופלעבן סליידז מיט אַ וועלקן יבערגאַנג אַנשטאָט פון אַ רוק.

פֿריִערדיקע ווייַטער

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

באַניץ

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

ניצן דאַטן אַטריביוץ צו לייכט קאָנטראָלירן די שטעלע פון ​​די קעראַסעל. data-slideאַקסעפּץ די טערמינען prevאָדער next, וואָס ענדערונגען די רוק שטעלע קאָרעוו צו זייַן קראַנט שטעלע. אַלטערנאַטיוועלי, נוצן data-slide-toצו פאָרן אַ רוי רוק אינדעקס צו די קעראַסעל data-slide-to="2", וואָס שיפץ די רוק שטעלע צו אַ באַזונדער אינדעקס אָנהייב מיט 0.

דער data-ride="carousel"אַטריביוט איז געניצט צו צייכן אַ קעראַסעל ווי אַנאַמייטינג סטאַרטינג בייַ בלאַט מאַסע. עס קענען ניט זיין געוויינט אין קאָמבינאַציע מיט (יבעריק און ומנייטיק) יקספּליסאַט דזשאַוואַסקריפּט יניטיאַליזאַטיאָן פון דער זעלביקער קעראַסעל.

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

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

$('.carousel').carousel()

אָפּציעס

אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. פֿאַר דאַטן אַטריביוץ, צולייגן די אָפּציע נאָמען צו data-, ווי אין data-interval="".

מעטהאָדס

.carousel(options)

יניטיאַליזעס די קעראַסעל מיט אַפּשאַנאַל אָפּציעס objectאון סטאַרץ סייקלינג דורך זאכן.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

סיקאַלז דורך די קעראַסעל זאכן פון לינקס צו רעכט.

.carousel('pause')

סטאַפּס די קעראַסעל פון סייקלינג דורך זאכן.

.carousel(number)

סיקלעס די קעראַסעל צו אַ באַזונדער ראַם (0 באזירט, ענלעך צו אַ מענגע). קערט צו די קאַללער איידער די ציל נומער איז געוויזן (ד"ה איידער די slid.bs.carouselגעשעעניש אַקערז).

.carousel('prev')

סיקלעס צו די פריערדיקע נומער. קערט צו די קאַללער איידער די פריערדיקע נומער איז געוויזן (ד"ה איידער די slid.bs.carouselגעשעעניש אַקערז).

.carousel('next')

סיקלעס צו דער ווייַטער נומער. קערט צו די קאַללער איידער דער ווייַטער נומער איז געוויזן (ד"ה איידער די slid.bs.carouselגעשעעניש אַקערז).

.carousel('dispose')

צעשטערט אַן עלעמענט ס קעראַסעל.

געשעענישן

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

• direction: די ריכטונג אין וואָס די קעראַסעל איז סליידינג (אָדער "left"אָדער "right").
• relatedTarget: דער DOM עלעמענט וואָס איז סליד אין פּלאַץ ווי די אַקטיוו נומער.
• from: דער אינדעקס פון דעם יעצטיגן נומער
• to: דער אינדעקס פון דער ווייַטער נומער

אַלע קעראַסעל געשעענישן זענען פייערד אין די קעראַסעל זיך (ד"ה בייַ די <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

טוישן יבערגאַנג געדויער

די יבערגאַנג געדויער פון .carousel-itemקענען זיין טשיינדזשד מיט די $carousel-transitionסאַסס בייַטעוודיק איידער קאַמפּיילינג אָדער מנהג סטיילז אויב איר נוצן די קאַמפּיילד CSS. אויב קייפל טראַנזישאַנז זענען געווענדט, מאַכן זיכער אַז די יבערמאַכן יבערגאַנג איז דיפיינד ערשטער (למשל. transition: transform 2s ease, opacity .5s ease-out).