Рингишпил

Компонента на слајдшоу за возење велосипед низ елементи - слики или слајдови од текст - како рингишпил.

Како работи

Вртелешката е слајдшоу за возење велосипед низ серија содржини, изградена со CSS 3D трансформации и малку JavaScript. Работи со серија слики, текст или прилагодено обележување. Вклучува и поддршка за претходни/следни контроли и индикатори.

Во прелистувачите каде што е поддржано API за видливост на страницата , рингишпилот ќе избегне лизгање кога веб-страницата не е видлива за корисникот (како на пр., кога картичката на прелистувачот е неактивна, прозорецот на прелистувачот е минимизиран, итн.).

Имајте предвид дека вгнездените вртелешки не се поддржани, а рингишпилите генерално не се усогласени со стандардите за пристапност.

И на крај, ако го градите нашиот JavaScript од извор, тоа бараutil.js .

Пример

Вртелешките не ги нормализираат автоматски димензиите на слајдовите. Како такви, можеби ќе треба да користите дополнителни алатки или сопствени стилови за соодветна големина на содржината. Додека вртелешките поддржуваат претходни/следни контроли и индикатори, тие не се експлицитно потребни. Додајте и приспособете како што ви одговара.

Класата .activeтреба да се додаде на еден од слајдовите во спротивно рингишпилот нема да биде видлив. Исто така, погрижете се да поставите уникатен ID на .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, pharetra augue mollis interdum.

Втора етикета на слајдот

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Етикета за трет слајд

Празен commodo cursus magna, vel scelerisque nisl consectetur.

Претходна Следно

<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 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"се користи за означување на рингишпил како анимирана почнувајќи од вчитувањето на страницата. Не може да се користи во комбинација со (непотребна и непотребна) експлицитна 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).