קעראַסעל

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

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

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

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

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

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

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

בייַשפּיל

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

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

בלויז סליידז

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

<div id="carouselExampleSlidesOnly" class="carousel slide" data-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-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-target="#carouselExampleControls" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</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 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-target="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

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

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

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

עטלעכע רעפּריזענאַטיוו אָרטהאָלדער אינהאַלט פֿאַר דער ערשטער רוק.

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

עטלעכע רעפּריזענאַטיוו אָרטהאָלדער אינהאַלט פֿאַר די רגע רוק.

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

עטלעכע רעפּריזענאַטיוו אָרטהאָלדער אינהאַלט פֿאַר די דריט רוק.

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <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-target="#carouselExampleCaptions" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

קראָספאַדע

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

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-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-target="#carouselExampleFade" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

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

לייג data-interval=""צו אַ .carousel-itemצו טוישן די סומע פון צייט צו פאַרהאַלטן צווישן אויטאָמאַטיש סייקלינג צו דער ווייַטער נומער.

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-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-target="#carouselExampleInterval" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

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

קעראַסאַלז שטיצן סוויפּינג לינקס / רעכט אויף טאָוטשסקרעען דעוויסעס צו רירן צווישן סליידז. דעם קענען זיין פאַרקריפּלט ניצן די data-touchאַטריביוט. דער ביישפּיל אונטן אויך טוט נישט אַרייַננעמען די data-rideאַטריביוט און האט data-interval="false"אַזוי עס קען נישט אַוטאָפּלייַ.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-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-target="#carouselExampleControlsNoTouching" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

באַניץ

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

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

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

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

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

$('.carousel').carousel()

אָפּציעס

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

נאָמען	טיפּ	פעליקייַט	באַשרייַבונג
מעהאַלעך	נומער	5000	די סומע פון צייט צו פאַרהאַלטן צווישן אויטאָמאַטיש סייקלינג אַ נומער. אויב `false`, קעראַסעל וועט נישט אויטאָמאַטיש ציקל.
קיבארד	בוליאַן	אמת	צי די קעראַסעל זאָל רעאַגירן צו קלאַוויאַטור געשעענישן.
פּויזע	שטריקל \| בוליאַן	'שוועבן'	אויב שטעלן צו `'hover'`, פּאָזאַז די סייקלינג פון די קעראַסעל אויף `mouseenter`און ריסומז די סייקלינג פון די קעראַסעל אויף `mouseleave`. אויב שטעלן צו `false`, כאַווערינג איבער די קעראַסעל וועט נישט פּויזע עס. אויף פאַרבינדן-ענייבאַלד דעוויסעס, ווען שטעלן צו `'hover'`, סייקלינג וועט פּויזע אויף `touchend`(אַמאָל דער באַניצער פאַרטיק ינטעראַקטינג מיט די קעראַסעל) פֿאַר צוויי ינטערוואַלז, איידער אויטאָמאַטיש ריזומינג. באַמערקונג אַז דאָס איז אין דערצו צו די אויבן מויז נאַטור.
פאָר	שטריקל	פאַלש	אַוטאָפּלייז די קעראַסעל נאָך דער באַניצער מאַניואַלי סייקאַלז דער ערשטער נומער. אויב באַשטימט צו `'carousel'`, אַוטאָפּלייז די קעראַסעל אויף מאַסע.
ייַנוויקלען	בוליאַן	אמת	צי די קעראַסעל זאָל קאַנטיניואַסלי ציקל אָדער האָבן שווער סטאַפּס.
אָנרירן	בוליאַן	אמת	צי די קעראַסעל זאָל שטיצן לינקס / רעכט לאַקכענען ינטעראַקשאַנז אויף טאָוטשסקרעען דעוויסעס.

מעטהאָדס

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

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

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

`.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')`

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

`.carousel('nextWhenVisible')`

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

`.carousel('to')`

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

געשעענישן

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

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

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

געשעעניש טיפּ	באַשרייַבונג
slide.bs.carousel	דער געשעעניש פירט גלייך ווען דער `slide`בייַשפּיל אופֿן איז ינוואָוקט.
סליד.בס.קעראַסעל	דעם געשעעניש איז פייערד ווען די קעראַסעל האט געענדיקט זיין רוק יבערגאַנג.

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

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

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