Рингишпил

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

На оваа страница

Како работи

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

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

Ефектот на анимација на оваа компонента зависи од prefers-reduced-motionмедиумското барање. Погледнете го делот за намалено движење од нашата документација за пристапност .

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

Пример

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

Класата .activeтреба да се додаде на еден од слајдовите во спротивно рингишпилот нема да биде видлив. Исто така, погрижете се да поставите ун��катна idза .carouselизборните контроли, особено ако користите повеќе вртелешки на една страница. Контролните и индикаторските елементи мора да имаат data-bs-targetатрибут (или hrefза врски) што одговара idна .carouselелементот.

Само слајдови

Еве рингишпил само со слајдови. Забележете го присуството на .d-blockи .w-100на сликите на рингишпилот за да се спречи стандардното порамнување на сликите од прелистувачот.

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

Со индикатори

Можете исто така да ги додадете индикаторите во рингишпилот, заедно со контролите.

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Со натписи

Лесно додавајте титлови на вашите слајдови со .carousel-captionелементот во кој било .carousel-item. Тие можат лесно да се сокријат на помали пристаништа за гледање, како што е прикажано подолу, со опционални алатки за приказ . Ги криеме првично со .d-noneи ги враќаме на уреди со средна големина со .d-md-block.

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

Некои репрезентативни содржини на место за првиот слајд.

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

Некои репрезентативни содржини на место за вториот слајд.

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

Некои репрезентативни содржини на местенка за третиот слајд.

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Crossfade

Додајте .carousel-fadeво вашиот рингишпил за да ги анимирате слајдовите со бледнее транзиција наместо со слајд.

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

Индивидуален `.carousel-item`интервал

Додајте data-bs-interval=""во a .carousel-itemза да го промените времето за одложување помеѓу автоматското возење велосипед до следната ставка.

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

Оневозможи лизгање со допир

Вртелешките поддржуваат лизгање лево/десно на уредите со екран на допир за да се движите помеѓу слајдовите. Ова може да се оневозможи со користење на data-bs-touchатрибутот. Примерот подолу, исто така, не го вклучува data-bs-rideатрибутот и има data-bs-interval="false"за да не се репродуцира автоматски.

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

Темна варијанта

Додајте .carousel-darkво .carouselза потемни контроли, индикатори и натписи. Контролите се превртени од нивното стандардно бело полнење со filterсвојството CSS. Титловите и контролите имаат дополнителни Sass променливи кои ги приспособуваат colorи background-color.

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

Некои репрезентативни содржини на место за првиот слајд.

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

Некои репрезентативни содржини на место за вториот слајд.

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

Некои репрезентативни содржини на местенка за третиот слајд.

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <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" data-bs-interval="2000">
      <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-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Прилагодена транзиција

Времетраењето на транзицијата на .carousel-itemможе да се смени со $carousel-transition-durationпроменливата Sass пред компајлирањето или приспособените стилови ако користите компајлирана CSS. Ако се применуваат повеќе транзиции, проверете дали транзицијата на трансформацијата е прво дефинирана (на пр. transition: transform 2s ease, opacity .5s ease-out).

Сас

Променливи

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

Употреба

Преку атрибути на податоци

Use data attributes to easily control the position of the carousel. data-bs-slide accepts the keywords prev or next, which alters the slide position relative to its current position. Alternatively, use data-bs-slide-to to pass a raw slide index to the carousel data-bs-slide-to="2", which shifts the slide position to a particular index beginning with 0.

The data-bs-ride="carousel" attribute is used to mark a carousel as animating starting at page load. If you don’t use data-bs-ride="carousel" to initialize your carousel, you have to initialize it yourself. It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.

Via JavaScript

Call carousel manually with:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-bs-, as in data-bs-interval="".

Name	Type	Default	Description
`interval`	number	`5000`	The amount of time to delay between automatically cycling an item. If `false`, carousel will not automatically cycle.
`keyboard`	boolean	`true`	Whether the carousel should react to keyboard events.
`pause`	string \| boolean	`'hover'`	If set to `'hover'`, pauses the cycling of the carousel on `mouseenter` and resumes the cycling of the carousel on `mouseleave`. If set to `false`, hovering over the carousel won't pause it. On touch-enabled devices, when set to `'hover'`, cycling will pause on `touchend` (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.
`ride`	string \| boolean	`false`	Autoplays the carousel after the user manually cycles the first item. If set to `'carousel'`, autoplays the carousel on load.
`wrap`	boolean	`true`	Whether the carousel should cycle continuously or have hard stops.
`touch`	boolean	`true`	Whether the carousel should support left/right swipe interactions on touchscreen devices.

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

You can create a carousel instance with the carousel constructor, for example, to initialize with additional options and start cycling through items:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 2000,
  wrap: false
})

Method	Description
`cycle`	Cycles through the carousel items from left to right.
`pause`	Stops the carousel from cycling through items.
`prev`	Cycles to the previous item. Returns to the caller before the previous item has been shown (e.g., before the `slid.bs.carousel` event occurs).
`next`	Cycles to the next item. Returns to the caller before the next item has been shown (e.g., before the `slid.bs.carousel` event occurs).
`nextWhenVisible`	Don't cycle carousel to next when the page isn't visible or the carousel or its parent isn't visible. Returns to the caller before the target item has been shown
`to`	Cycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the target item has been shown (e.g., before the `slid.bs.carousel` event occurs).
`dispose`	Destroys an element's carousel. (Removes stored data on the DOM element)
`getInstance`	Static method which allows you to get the carousel instance associated to a DOM element, you can use it like this: `bootstrap.Carousel.getInstance(element)`
`getOrCreateInstance`	Static method which returns a carousel instance associated to a DOM element or create a new one in case it wasn't initialised. You can use it like this: `bootstrap.Carousel.getOrCreateInstance(element)`

Events

Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:

direction: The direction in which the carousel is sliding (either "left" or "right").
relatedTarget: The DOM element that is being slid into place as the active item.
from: The index of the current item
to: The index of the next item

All carousel events are fired at the carousel itself (i.e. at the <div class="carousel">).

Event type	Description
`slide.bs.carousel`	Fires immediately when the `slide` instance method is invoked.
`slid.bs.carousel`	Fired when the carousel has completed its slide transition.

var myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', function () {
  // do something...
})

Рингишпил

Како работи

Пример

Само слајдови

Со контроли

Со индикатори

Со натписи

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

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

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

Crossfade

Индивидуален .carousel-itemинтервал

Оневозможи лизгање со допир

Темна варијанта

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

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

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

Прилагодена транзиција

Сас

Променливи

Употреба

Преку атрибути на податоци

Via JavaScript

Options

Methods

Asynchronous methods and transitions

Events

Индивидуален `.carousel-item`интервал