Гузаштан ба мундариҷаи асосӣ Ба новбари ҳуҷҷатҳо гузаред
in English

Карусель

Ҷузъи слайд-шоу барои гузаштан аз байни элементҳо - тасвирҳо ё слайдҳои матн - ба монанди карусел.

Дар ин саҳифа

Он чӣ гуна кор мекунад

Карусел слайд-шоу барои велосипедронӣ дар як қатор мундариҷа мебошад, ки бо тағиротҳои CSS 3D ва каме JavaScript сохта шудааст. Он бо як қатор тасвирҳо, матн ё аломатгузории фармоишӣ кор мекунад. Он инчунин дастгирии назорат ва нишондиҳандаҳои қаблӣ / ояндаро дар бар мегирад.

Дар браузерҳое, ки API Visibility Page Visibility дастгирӣ карда мешавад, карусел аз лағжиш канорагирӣ мекунад, вақте ки веб саҳифа ба корбар намоён нест (масалан, вақте ки варақаи браузер ғайрифаъол аст, равзанаи браузер кам карда мешавад ва ғ.).

Таъсири аниматсияи ин ҷузъ аз 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>

Илова 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);

Истифода

Тавассути атрибутҳои маълумот

Атрибутҳои маълумотро истифода баред, то мавқеи каруселро ба осонӣ идора кунед. 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

Каруселро дастӣ бо:

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

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-bs-монанди замима кунед data-bs-interval="".

Ном Навъи Пешфарз Тавсифи
interval рақам 5000 Миқдори вақт барои таъхир дар байни велосипедронии автоматии ашё. Агар false, карусел ба таври худкор давр намезанад.
keyboard булӣ true Оё карусел бояд ба рӯйдодҳои клавиатура вокуниш нишон диҳад.
pause сатр | булӣ 'hover'

Агар ба танзим гузошта шуда бошад 'hover', гардиши каруселро таваққуф mouseenterмекунад ва чарх задани каруселро дар mouseleave. Агар ба - муқаррар карда шавад false, дар болои карусел гузоштан онро таваққуф намекунад.

Дар дастгоҳҳои ламсӣ, вақте ки ба он гузошта шудааст 'hover', велосипедронӣ пеш аз идомаи худкор ба муддати ду фосила таваққуф мекунад touchend(вақте ки корбар муошират бо каруселро анҷом дод). Аҳамият диҳед, ки ин ба ғайр аз рафтори муш дар боло аст.
ride сатр | булӣ false Пас аз он ки корбар ҷузъи аввалро дастӣ давр мезанад, каруселро худкор боз мекунад. Агар ба , танзим шуда бошад 'carousel', каруселро ҳангоми боркунӣ худкор боз мекунад.
wrap булӣ true Новобаста аз он ки карусель бояд пайваста давр занад ё таваққуфҳои сахт дошта бошад.
touch булӣ true Новобаста аз он ки карусел бояд мутақобилаи лағжиши чап/ростро дар дастгоҳҳои экрани сенсорӣ дастгирӣ кунад.

Усулҳо

Усулҳо ва гузаришҳои асинхронӣ

Ҳама усулҳои API асинхронӣ мебошанд ва гузаришро оғоз мекунанд. Онҳо баробари оғоз шудани гузариш ба зангзананда бармегарданд, аммо пеш аз анҷоми он . Илова бар ин, даъвати методӣ ба ҷузъи гузариш нодида гирифта мешавад.

Барои маълумоти бештар ба ҳуҷҷатҳои JavaScript-и мо нигаред .

Шумо метавонед як мисоли каруселро бо созандаи карусел эҷод кунед, масалан, барои оғоз кардани имконоти иловагӣ ва оғоз кардани велосипедронӣ тавассути ашё:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 2000,
  wrap: false
})
Усул Тавсифи
cycle Дар байни ҷузъҳои карусел аз чап ба рост давр мезанад.
pause Каруселро аз гардиши байни ашё бозмедорад.
prev Давра ба банди қаблӣ. Ба зангзананда пеш аз намоиш додани ҷузъи қаблӣ бармегардад (масалан, пеш аз slid.bs.carouselрух додани ҳодиса).
next Давра ба банди оянда. Ба зангзананда пеш аз намоиш додани ҷузъи навбатӣ бармегардад (масалан, пеш аз slid.bs.carouselрух додани ҳодиса).
nextWhenVisible Вақте ки саҳифа намоён набошад ё карусел ё волидайни он намоён набошад, аз гардиш ба навбатӣ нагузаронед. Пеш аз нишон додани ашёи мавриди ҳадаф ба зангзан бармегардад
to Каруселро ба чаҳорчӯбаи мушаххас давр мезанад (дар асоси 0, монанд ба массив). Ба зангзананда пеш аз намоиш додани ашёи мақсаднок бармегардад (масалан, пеш аз slid.bs.carouselрух додани ҳодиса).
dispose Карусели элементро нест мекунад. (Маълумоти захирашударо дар элементи DOM нест мекунад)
getInstance Усули статикӣ, ки ба шумо имкон медиҳад, ки мисоли каруселеро, ки ба унсури DOM алоқаманд аст, гиред, шумо метавонед онро чунин истифода баред:bootstrap.Carousel.getInstance(element)
getOrCreateInstance Усули статикӣ, ки як мисоли каруселеро, ки ба унсури DOM алоқаманд аст, бармегардонад ё дар сурати ба кор андохта нашудани он нав эҷод мекунад. Шумо метавонед онро чунин истифода баред:bootstrap.Carousel.getOrCreateInstance(element)

Ҳодисаҳо

Синфи карусели Bootstrap ду ҳодисаро барои пайвастшавӣ ба функсияи карусел фош мекунад. Ҳарду ҳодиса дорои хосиятҳои иловагии зерин мебошанд:

  • direction: Самт, ки дар он карусел ҳаракат мекунад (ё "left"ё "right").
  • relatedTarget: Унсури DOM, ки ҳамчун унсури фаъол ба ҷои ҷойгир карда мешавад.
  • from: Индекси банди ҷорӣ
  • to: Индекси банди навбатӣ

Ҳама рӯйдодҳои каруселӣ ба худи карусел (яъне дар <div class="carousel">).

Навъи ҳодиса Тавсифи
slide.bs.carousel slideВақте ки усули мисол даъват карда мешавад, фавран оташ мезанад .
slid.bs.carousel Вақте ки карусел гузариши слайди худро анҷом дод, тирандозӣ карда мешавад. 
var myCarousel = document.getElementById('myCarousel')

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