Source

Карусель

Карусель кебек элементлар аша велосипедта слайдшоу компоненты - рәсемнәр яки текст слайдлары.

Ничек бу эшли

Карусель - велосипедта велосипед өчен слайд-шоу, CSS 3D трансформациясе һәм бераз JavaScript белән төзелгән. Ул рәсемнәр, текст яки махсус билгеләр белән эшли. Бу шулай ук ​​алдагы / киләсе контроль һәм күрсәткечләргә ярдәм күрсәтә.

Page Visibility API ярдәм иткән браузерларда карусель веб-бит кулланучыга күренмәгәндә тайпылудан сакланыр (мәсәлән, браузер салынмасы актив булмаганда, браузер тәрәзәсе минимум һ.б.).

Бу компонентның анимация эффекты prefers-reduced-motionмедиа соравына бәйле. Безнең документларның кыскартылган хәрәкәт бүлеген карагыз .

Зинһар, шуны онытмагыз: ояланган карусельләр булышмый, һәм карусельләр гадәттә мөмкинлек стандартларына туры килми.

Ниһаять, сез безнең JavaScriptны чыганактан төзисез икән, бу кирәкutil.js .

Мисал

Карусельләр слайд үлчәмнәрен автоматик рәвештә нормалаштырмыйлар. Шулай итеп, сезгә эчтәлекне тиешле күләмдә куллану өчен өстәмә коммуналь хезмәтләр яки махсус стильләр кулланырга кирәк булырга мөмкин. Карусельләр алдагы / киләсе контроль һәм күрсәткечләрне хупласа да, алар ачыктан-ачык таләп ителми. Fitзегез теләгәнчә өстәгез һәм көйләгез.

.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 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 id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <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>Nulla vitae elit libero, a pharetra augue mollis interdum.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Кроссфейд

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

Автоматик велосипедта киләсе пунктка тоткарлану өчен вакыт күләмен үзгәртү өчен data-interval=""өстәгез ..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"Атрибут карусельне бит йөгеннән башлап җанландыручы итеп билгеләр өчен кулланыла . Карусельне башлау өчен кулланмасаң data-ride="carousel", аны үзең башларга тиеш. Аны шул ук карусельнең JavaScript инициализациясе белән (артык һәм кирәксез) ачык кулланып булмый.

JavaScript аша

Карусель белән кул белән шалтыратыгыз:

$('.carousel').carousel()

Вариантлар

Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-өстәгез data-interval="".

Исем Тип Килешү Тасвирлау
интервал саны 5000 Автоматик велосипедта велосипедта тоткарлану вакыты. Ялган булса, карусель автоматик рәвештә әйләнмәячәк.
клавиатура буле дөрес Карусель клавиатура вакыйгаларына реакция бирергә тиешме.
пауза кыл | буле "каер"

"hover"Карусель велосипедын туктатып, карусель mouseenterвелосипедын дәвам итә mouseleave. falseКарусель өстендә йөрү аны туктатмас .

Сенсор ярдәмендә эшләнгән җайланмаларда, "hover"велосипедта автомат рәвештә яңадан торгызылганчы, ике вакыт аралыгында велосипед тукталачак touchend(кулланучы карусель белән үзара бәйләнешне тәмамлагач). Игътибар итегез, бу тычканның югарыдагы тәртибенә өстәмә.
йөртү кыл ялган Кулусель беренче әйберне кул белән әйләндергәннән соң карусельне автоматлаштыра. "Карусель" булса, карусельне йөк өстендә автоматлаштыра.
төрү буле дөрес Карусель өзлексез әйләнергә тиешме яки каты тукталышларга ияме.
кагылу буле дөрес Карусель сенсорлы экран җайланмаларында сул / уң сөртү үзара бәйләнешне хупларга тиешме.

Методлар

Асинхрон ысуллар һәм күчү

Барлык API ысуллары да асинхрон һәм күчү башлый . Күчерелеш башлангач, ләкин ул беткәнче алар шалтыратучыга кире кайталар . Моннан тыш, күчү компонентына методик чакыру игътибарсыз калачак .

Күбрәк мәгълүмат алу өчен безнең JavaScript документларын карагыз .

.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">).

Вакыйга төре Тасвирлау
слайд.bs.carousel slideБу вакыйга инстанция ысулы кулланылгач шунда ук янып тора .
slid.bs.carousel Бу вакыйга карусель слайдка күчүне тәмамлагач атыла. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

Күчү вакытын үзгәртү

Күчерүнең озынлыгы Sass үзгәрүчесе белән компиляцияләнгәнче яки махсус стильләр .carousel-itemбелән үзгәртелергә мөмкин, $carousel-transitionәгәр сез тупланган CSS кулланасыз икән. Әгәр дә берничә күчеш кулланылса, башта трансформациянең күчүен билгеләгез (мәс. transition: transform 2s ease, opacity .5s ease-out).