Source

קעראַסעל

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

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

די קעראַסעל איז אַ סלידעשאָוו פֿאַר סייקלינג דורך אַ סעריע פון ​​אינהאַלט, געבויט מיט 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.

<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="".

נאָמען טיפּ פעליקייַט באַשרייַבונג
מעהאַלעך נומער 5000 די סומע פון ​​צייט צו פאַרהאַלטן צווישן אויטאָמאַטיש סייקלינג אַ נומער. אויב פאַלש, קעראַסעל וועט נישט אויטאָמאַטיש ציקל.
קיבארד בוליאַן אמת צי די קעראַסעל זאָל רעאַגירן צו קלאַוויאַטור געשעענישן.
פּויזע שטריקל | בוליאַן "שוועבן"

אויב שטעלן צו "hover", פּאָזאַז די סייקלינג פון די קעראַסעל אויף mouseenterאון ריסומז די סייקלינג פון די קעראַסעל אויף mouseleave. אויב שטעלן צו false, כאַווערינג איבער די קעראַסעל וועט נישט פּויזע עס.

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

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

מעטהאָדס

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

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

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

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

געשעעניש טיפּ באַשרייַבונג
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).