Въртележка

Компонент за слайдшоу за циклично преминаване през елементи - изображения или слайдове с текст - като въртележка.

Как работи

Въртележката е слайдшоу за циклично преминаване през поредица от съдържание, изградено с CSS 3D трансформации и малко JavaScript. Работи с поредица от изображения, текст или персонализирано маркиране. Той също така включва поддръжка за предишни/следващи контроли и индикатори.

В браузъри, където API за видимост на страницата се поддържа, въртележката ще избегне плъзгане, когато уеб страницата не е видима за потребителя (като например, когато разделът на браузъра е неактивен, прозорецът на браузъра е минимизиран и т.н.).

Моля, имайте предвид, че вложените въртележки не се поддържат и въртележките обикновено не отговарят на стандартите за достъпност.

И накрая, ако изграждате нашия JavaScript от изходния код, той изисква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.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Етикет на трети слайд

Praesent 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')

Унищожава въртележката на елемент.

събития

Carousel класът на 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).