Карусель

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

Бу биттә

Ничек бу эшли

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

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

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

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

Мисал

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

.activeКлассны слайдларның берсенә өстәргә кирәк, югыйсә карусель күренмәячәк. Өстәмә контроль өчен уникаль куярга онытмагыз id, .carouselаеруча бер биттә берничә карусель куллансагыз. Контроль һәм күрсәткеч элементлары элементның туры килгән атрибутына data-bs-target(яки hrefсылтамаларга) ия булырга тиеш .id.carousel

Слайдлар гына

Менә слайдлар белән карусель. Браузерның рәсемнәрнең тигезләнүен булдырмас өчен, карусель рәсемнәренең .d-blockбулуына игътибар итегез ..w-100

html

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

html

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

Күрсәткечләр белән

Сез карусельгә күрсәткечләр белән идарә итә аласыз.

html

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <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.

Беренче слайд ярлыгы

Беренче слайд өчен кайбер вәкил урыннары.

Икенче слайд ярлыгы

Икенче слайд өчен кайбер вәкил урыннары.

Өченче слайд ярлыгы

Өченче слайд өчен кайбер вәкил урыннары.

html

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <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>

Кроссфейд

.carousel-fadeСлайд урынына сүнгән күчү белән слайдларны җанландыру өчен карусельгә өстәгез . Сезнең карусель эчтәлегенә карап (мәсәлән, слайдлар гына текст), сез кроссфейд өчен дөрес .bg-bodyCSS-ны өстәргә теләрсез..carousel-item

html

<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=""өстәгез ..carousel-item

html

<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шуңа күрә ул автоплей түгел.

html

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="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өстәгез . Контрольләр CSS милеге .carouselбелән килешенгән ак тутырудан кире кайтарылды. filterТапшырулар һәм контроль өстәмә Sass үзгәрүчәннәре бар colorһәм background-color.

Беренче слайд ярлыгы

Беренче слайд өчен кайбер вәкил урыннары.

Икенче слайд ярлыгы

Икенче слайд өчен кайбер вәкил урыннары.

Өченче слайд ярлыгы

Өченче слайд өчен кайбер вәкил урыннары.

html

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

Махсус күчү

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

Сасс

Variзгәрешләр

Барлык карусельләр өчен үзгәрешләр:

$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);

Куллану

Мәгълүмат атрибутлары аша

Карусель торышын җиңел контрольдә тоту өчен мәгълүмат атрибутларын кулланыгыз. data-bs-slideачкыч сүзләрне кабул итә prevяки nextслайд позициясен хәзерге торышына үзгәртә. Альтернатив рәвештә, data-bs-slide-toчимал слайд индексын карусельгә күчерү өчен кулланыгыз data-bs-slide-to="2", ул слайд позициясен билгеле индекска күчерә 0.

data-bs-ride="carousel"Атрибут карусельне бит йөгеннән башлап җанландыручы итеп билгеләр өчен кулланыла . Карусельне башлау өчен кулланмасаң data-bs-ride="carousel", аны үзең башларга тиеш. Аны шул ук карусельнең JavaScript инициализациясе белән (артык һәм кирәксез) ачык кулланып булмый.

JavaScript аша

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

const carousel = new bootstrap.Carousel('#myCarousel')

Вариантлар

Вариантлар мәгълүмат атрибутлары яки JavaScript аша уза алганлыктан, сез опция исемен куша data-bs-аласыз data-bs-animation="{value}". Вариант исемен мәгълүмат атрибутлары аша үткәндә " camelCase " дан "kebab -case " га үзгәртегез. Мәсәлән, data-bs-custom-class="beautifier"урынына кулланыгыз data-bs-customClass="beautifier".

Bootstrap 5.2.0 мәгълүматларына караганда, барлык компонентлар эксперименталь сакланган мәгълүмат атрибутын хуплый, data-bs-configалар гади компонент конфигурациясен JSON сызыгы итеп урнаштыра ала. Элемент data-bs-config='{"delay":0, "title":123}'һәм data-bs-title="456"атрибутлар булганда, соңгы titleкыйммәт булачак 456һәм аерым мәгълүмат атрибутлары бирелгән кыйммәтләрне юкка чыгарачак data-bs-config. Моннан тыш, булган мәгълүмат атрибутлары JSON кебек кыйммәтләрне урнаштыра ала data-bs-delay='{"show":0,"hide":150}'.

Исем	Тип	Килешү	Тасвирлау
`interval`	саны	`5000`	Автоматик велосипедта велосипедта тоткарлану вакыты.
`keyboard`	буле	`true`	Карусель клавиатура вакыйгаларына реакция бирергә тиешме.
`pause`	кыл, буле	`"hover"`	`"hover"`Карусель велосипедын туктатып, карусель `mouseenter`велосипедын дәвам итә `mouseleave`. Әгәр көйләнгән булса `false`, карусель өстендә йөрү аны туктатмас. Сенсор ярдәмендә эшләнгән җайланмаларда, `"hover"`велосипедта автомат рәвештә яңадан торгызылганчы, ике вакыт аралыгында велосипед тукталачак `touchend`(кулланучы карусель белән үзара бәйләнешне тәмамлагач). Бу тычкан тәртибенә өстәмә.
`ride`	кыл, буле	`false`	Кулланучы `true`беренче әйберне кул белән әйләндергәннән соң карусельне автоматлаштыра. Әгәр көйләнгән булса `"carousel"`, карусельне йөк өстендә автоматлаштыра.
`touch`	буле	`true`	Карусель сенсорлы экран җайланмаларында сул / уң сөртү үзара бәйләнешне хупларга тиешме.
`wrap`	буле	`true`	Карусель өзлексез әйләнергә тиешме яки каты тукталышларга ияме.

Методлар

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

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

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

Сез карусель конструкторы белән карусель инстанциясен булдыра аласыз, мәсәлән, өстәмә вариантлар белән башлап, әйберләр аша велосипедта йөри башлау өчен:

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

Метод	Тасвирлау
`cycle`	Сулдан уңга карусель әйберләре аша цикллар.
`dispose`	Элемент каруселын җимерә. (DOM элементында сакланган мәгълүматны бетерә)
`getInstance`	Карусель инстанциясен DOM элементына бәйләргә мөмкинлек бирүче статик ысул, сез аны болай куллана аласыз : `bootstrap.Carousel.getInstance(element)`.
`getOrCreateInstance`	DOM элементына бәйләнгән карусель инстанциясен кайтаручы яки башлангыч булмаган очракта яңасын булдыручы статик ысул. Сез аны болай куллана аласыз : `bootstrap.Carousel.getOrCreateInstance(element)`.
`next`	Киләсе пунктка цикллар. Киләсе пункт күрсәтелгәнче шалтыратучыга кире кайта (мәсәлән, `slid.bs.carousel`вакыйга булганчы).
`nextWhenVisible`	Карусельне бит күренмәгәндә яки карусель яки аның әти-әнисе күренмәгәндә әйләндермәгез. Максатлы әйбер күрсәтелгәнче шалтыратучыга кире кайта .
`pause`	Карусельне велосипедта әйберләр аша туктата.
`prev`	Алдагы пунктка цикллар. Алдагы пункт күрсәтелгәнче шалтыратучыга кире кайта (мәсәлән, `slid.bs.carousel`вакыйга булганчы).
`to`	Карусельне билгеле бер рамкага әйләндерә (0 нигезендә, массивга охшаган). Максатлы әйбер күрсәтелгәнче шалтыратучыга кире кайта (мәсәлән, `slid.bs.carousel`вакыйга булганчы).

Вакыйгалар

Bootstrap карусель классы карусель функциясенә керү өчен ике вакыйганы фаш итә. Ике вакыйганың да түбәндәге өстәмә үзенчәлекләре бар:

direction: Карусель сикергән юнәлеш (я "left") "right".
relatedTarget: Актив әйбер буларак урынга сузылган DOM элементы.
from: Агымдагы пункт индексы
to: Киләсе пункт индексы

Барлык карусель вакыйгалары карусельнең үзенә (ягъни <div class="carousel">).

Вакыйга төре	Тасвирлау
`slid.bs.carousel`	Карусель слайдка күчү тәмамлангач.
`slide.bs.carousel`	`slide`Мисал ысулы кулланылганда шунда ук янып тора.

const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})

Карусель

Ничек бу эшли

Мисал

Слайдлар гына

Контроль белән

Күрсәткечләр белән

Язулар белән

Беренче слайд ярлыгы

Икенче слайд ярлыгы

Өченче слайд ярлыгы

Кроссфейд

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

Сенсорны сүндерүне сүндерегез

Караңгы вариант

Беренче слайд ярлыгы

Икенче слайд ярлыгы

Өченче слайд ярлыгы

Махсус күчү

Сасс

Variзгәрешләр

Куллану

Мәгълүмат атрибутлары аша

JavaScript аша

Вариантлар

Методлар

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

Вакыйгалар

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