Կարուսել

Սլայդերի ցուցադրման բաղադրիչ տարրերի (պատկերների կամ տեքստի սլայդների) միջով անցնելու համար, ինչպես կարուսելը:

Ինչպես է դա աշխատում

Կարուսելը սլայդ շոու է մի շարք բովանդակության միջով հեծանվով անցնելու համար, որը կառուցված է CSS 3D տրանսֆորմացիաներով և մի քիչ JavaScript-ով: Այն աշխատում է մի շարք պատկերների, տեքստի կամ հատուկ նշագրման հետ: Այն նաև ներառում է աջակցություն նախորդ/հաջորդ վերահսկման և ցուցիչների համար:

Բրաուզերներում, որտեղ աջակցվում է Page Visibility API- ն, կարուսելը կխուսափի սահումից, երբ վեբ էջը տեսանելի չէ օգտատիրոջը (օրինակ, երբ դիտարկիչի ներդիրն ակտիվ չէ, դիտարկիչի պատուհանը նվազագույնի է հասցված և այլն):

Խնդրում ենք նկատի ունենալ, որ տեղադրված կարուսելները չեն աջակցվում, և կարուսելները սովորաբար չեն համապատասխանում մատչելիության չափանիշներին:

Ի վերջո, եթե դուք կառուցում եք մեր JavaScript-ը աղբյուրից, դա պահանջում էutil.js :

Օրինակ

Կարուսելները ավտոմատ կերպով չեն նորմալացնում սլայդի չափերը: Որպես այդպիսին, ձեզ կարող է անհրաժեշտ լինել օգտագործել լրացուցիչ կոմունալ ծառայություններ կամ հատուկ ոճեր՝ համապատասխան չափի բովանդակության համար: Թեև կարուսելներն աջակցում են նախորդ/հաջորդ հսկիչները և ցուցիչները, դրանք բացահայտորեն պարտադիր չեն: Ավելացրեք և հարմարեցրեք այնպես, ինչպես հարմար եք գտնում:

Դասարանը պետք է .activeավելացվի սլայդներից մեկում, հակառակ դեպքում կարուսելը չի երևա: Նաև վստահ եղեք, որ ընտրովի վերահսկման համար սահմանեք եզակի ID .carousel, հատկապես, եթե մեկ էջի վրա օգտագործում եք բազմաթիվ կարուսելներ: Վերահսկիչ և ցուցիչ տարրերը պետք է ունենան data-targetհատկանիշ (կամ hrefհղումների համար), որը համապատասխանում է .carouselտարրի id-ին:

Միայն սլայդներ

Ահա կարուսել միայն սլայդներով: Նկատի ունեցեք կարուսելի .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:

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

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>

Օգտագործումը

Via data attributes

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

The data-ride="carousel" attribute is used to mark a carousel as animating starting at page load. It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.

Via JavaScript

Call carousel manually with:

$('.carousel').carousel()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-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	false	Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.
wrap	boolean	true	Whether the carousel should cycle continuously or have hard stops.

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.

`.carousel(options)`

Initializes the carousel with an optional options object and starts cycling through items.

$('.carousel').carousel({
  interval: 2000
})

`.carousel('cycle')`

Cycles through the carousel items from left to right.

`.carousel('pause')`

Stops the carousel from cycling through items.

`.carousel(number)`

Cycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the target item has been shown (i.e. before the slid.bs.carousel event occurs).

`.carousel('prev')`

Cycles to the previous item. Returns to the caller before the previous item has been shown (i.e. before the slid.bs.carousel event occurs).

`.carousel('next')`

Cycles to the next item. Returns to the caller before the next item has been shown (i.e. before the slid.bs.carousel event occurs).

`.carousel('dispose')`

Destroys an element’s carousel.

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").
relatedTargetDOM տարրը, որը սահում է իր տեղը որպես ակտիվ տարր:
fromԸնթացիկ տարրի ինդեքսը
toՀաջորդ կետի ինդեքսը

Կարուսելի բոլոր իրադարձությունները կրակում են հենց կարուսելի վրա (այսինքն՝ <div class="carousel">):

Միջոցառման տեսակը	Նկարագրություն
slide.bs.կարուսել	Այս իրադարձությունն անմիջապես գործարկվում է, երբ գործարկվում է `slide`օրինակի մեթոդը:
slid.bs.կարուսել	Այս միջոցառումը գործարկվում է, երբ կարուսելը ավարտում է իր սլայդային անցումը:

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Փոխել անցման տևողությունը

Անցման տեւողությունը .carousel-itemկարող է փոխվել $carousel-transitionSass փոփոխականով նախքան կոմպիլյացիան կամ հարմարեցված ոճերը, եթե դուք օգտագործում եք կազմված CSS: Եթե կիրառվում են մի քանի անցումներ, համոզվեք, որ փոխակերպման անցումը նախ սահմանված է (օր. transition: transform 2s ease, opacity .5s ease-out):