Карусель

Кампанент слайд-шоў для цыклічнага перамяшчэння элементаў — відарысаў або тэкставых слайдаў — як карусель.

Як гэта працуе

Карусель - гэта слайд-шоў для перамяшчэння па серыі змесціва, створанае з выкарыстаннем 3D-пераўтварэнняў CSS і трохі JavaScript. Ён працуе з серыямі малюнкаў, тэкстам або карыстацкай разметкай. Ён таксама ўключае падтрымку папярэдніх/наступных элементаў кіравання і індыкатараў.

У браўзерах, дзе падтрымліваецца API бачнасці старонкі , карусель пазбягае слізгацення, калі вэб-старонка не бачная карыстальніку (напрыклад, калі ўкладка браўзера неактыўная, акно браўзера згорнута і г.д.).

Майце на ўвазе, што ўкладзеныя каруселі не падтрымліваюцца, і каруселі звычайна не адпавядаюць стандартам даступнасці.

Нарэшце, калі вы ствараеце наш JavaScript з зыходнага кода, для гэтага патрабуеццаutil.js .

Прыклад

Каруселі не нармалізуюць памеры слайдаў аўтаматычна. Такім чынам, вам можа спатрэбіцца выкарыстоўваць дадатковыя ўтыліты або карыстальніцкія стылі для адпаведнага памеру кантэнту. Нягледзячы на ​​тое, што каруселі падтрымліваюць папярэднія/наступныя элементы кіравання і індыкатары, яны не з'яўляюцца абавязковымі. Дадавайце і наладжвайце, як лічыце патрэбным.

Клас .activeтрэба дадаць на адзін са слайдаў, інакш карусель не будзе бачная. Таксама не забудзьцеся ўсталяваць унікальны ідэнтыфікатар .carouselдля дадатковых элементаў кіравання, асабліва калі вы выкарыстоўваеце некалькі каруселяў на адной старонцы. Элементы кіравання і індыкатара павінны мець data-targetатрыбут (або hrefдля спасылак), які адпавядае id .carouselэлемента.

Толькі слайды

Вось толькі з горак карусель. Звярніце ўвагу на наяўнасць .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.

Этыкетка другога слайда

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Этыкетка трэцяга слайда

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>

Перакрыжаваны плынь

Дадайце .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>

Выкарыстанне

Праз атрыбуты дадзеных

Выкарыстоўвайце атрыбуты дадзеных, каб лёгка кіраваць становішчам каруселі. data-slideпрымае ключавыя словы prevабо next, што змяняе становішча слайда адносна яго бягучага становішча. У якасці альтэрнатывы выкарыстоўвайце , data-slide-toкаб перадаць неапрацаваны індэкс слайда ў карусель data-slide-to="2", якая зрушвае пазіцыю слайда да пэўнага індэксу, які пачынаецца з 0.

Атрыбут data-ride="carousel"выкарыстоўваецца, каб пазначыць карусель як аніміраваную, пачынаючы з загрузкі старонкі. Яго нельга выкарыстоўваць у спалучэнні з (залішняй і непатрэбнай) відавочнай ініцыялізацыяй JavaScript той жа каруселі.

Праз JavaScript

Выклік каруселі ўручную з дапамогай:

$('.carousel').carousel()

Параметры

Параметры могуць быць перададзены праз атрыбуты дадзеных або JavaScript. Для атрыбутаў дадзеных дадайце назву опцыі да data-, як у data-interval="".

Метады

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

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

Змяніць працягласць пераходу

Працягласць пераходу .carousel-itemможа быць зменена з дапамогай $carousel-transitionзменнай Sass перад кампіляцыяй або карыстацкіх стыляў, калі вы выкарыстоўваеце скампіляваны CSS. Калі ўжываецца некалькі пераходаў, пераканайцеся, што спачатку вызначаны пераход трансфармацыі (напрыклад, transition: transform 2s ease, opacity .5s ease-out).