Карусель

Ҷузъи слайд-шоу барои гузаштан аз байни элементҳо - тасвирҳо ё слайдҳои матн - ба монанди карусел.

Он чӣ гуна кор мекунад

Карусел слайд-шоу барои велосипедронӣ дар як қатор мундариҷа мебошад, ки бо тағиротҳои CSS 3D ва каме JavaScript сохта шудааст. Он бо як қатор тасвирҳо, матн ё аломатгузории фармоишӣ кор мекунад. Он инчунин дастгирии назорат ва нишондиҳандаҳои қаблӣ / ояндаро дар бар мегирад.

Дар браузерҳое, ки API Visibility Page Visibility дастгирӣ карда мешавад, карусел аз лағжиш канорагирӣ мекунад, вақте ки веб саҳифа ба корбар намоён нест (масалан, вақте ки варақаи браузер ғайрифаъол аст, равзанаи браузер кам карда мешавад ва ғ.).

Лутфан бидонед, ки каруселҳои лона пуштибонӣ намешаванд ва каруселҳо ба стандартҳои дастрасӣ мувофиқ нестанд.

Ниҳоят, агар шумо JavaScript-и моро аз сарчашма сохта истода бошед, онutil.js .

Мисол

Каруселҳо андозаи слайдҳоро ба таври худкор муқаррар намекунанд. Ҳамин тавр, ба шумо лозим меояд, ки утилитаҳои иловагӣ ё услубҳои фармоиширо барои андозаи мувофиқи мундариҷа истифода баред. Гарчанде ки каруселҳо назорат ва нишондиҳандаҳои қаблӣ/ояндаро дастгирӣ мекунанд, онҳо ба таври возеҳ талаб карда намешаванд. Илова ва танзим кунед, ки шумо мувофиқат мекунед.

Синфро .activeба яке аз слайдҳо илова кардан лозим аст, вагарна карусель намоён нахоҳад шуд. Инчунин боварӣ ҳосил кунед, ки дар .carouselидоракунии ихтиёрӣ id-и беназирро насб кунед, хусусан агар шумо дар як саҳифа якчанд каруселҳоро истифода баред. Унсурҳои назорат ва нишондиҳанда бояд 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>

Бо назорат

Илова ба назорати қаблӣ ва оянда:

<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>
  <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 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>
  <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>

Crossfade

Ба .carousel-fadeкарусели худ илова кунед, то слайдҳоро бо гузариши пажмурда ба ҷои слайд анимат кунед.

<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>
  <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>

.carousel-itemФосилаи инфиродӣ

Илова data-interval=""ба a .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>
  <a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" 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"барои қайд кардани карусел ҳамчун аниматсия аз сарбории саҳифа истифода мешавад. Онро дар якҷоягӣ бо оғозкунии возеҳ JavaScript-и ҳамон карусел истифода бурдан мумкин нест.

Тавассути JavaScript

Каруселро дастӣ бо:

$('.carousel').carousel()

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба 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тағирёбандаи Sass пеш аз тартиб додан ё сабкҳои фармоишӣ тағир додан мумкин аст, агар шумо CSS-и тартибдодашударо истифода баред. Агар гузаришҳои сершумор татбиқ карда шаванд, боварӣ ҳосил кунед, ки гузариши табдил аввал муайян карда шудааст (масалан transition: transform 2s ease, opacity .5s ease-out).