in English

Carousel

ອົງປະກອບສະໄລ້ໂຊສຳລັບການຖີບລົດຜ່ານອົງປະກອບ-ຮູບພາບ ຫຼືສະໄລ້ຂອງຂໍ້ຄວາມ-ເຊັ່ນ: carousel.

ມັນເຮັດວຽກແນວໃດ

carousel ແມ່ນ slideshow ສໍາລັບການຂີ່ລົດຖີບຜ່ານຊຸດຂອງເນື້ອຫາ, ສ້າງດ້ວຍ CSS 3D transforms ແລະເລັກນ້ອຍຂອງ JavaScript. ມັນເຮັດວຽກກັບຊຸດຮູບພາບ, ຂໍ້ຄວາມ, ຫຼືເຄື່ອງໝາຍທີ່ກຳນົດເອງ. ມັນຍັງປະກອບມີການສະຫນັບສະຫນູນສໍາລັບການຄວບຄຸມທີ່ຜ່ານມາ / ຕໍ່ໄປແລະຕົວຊີ້ວັດ.

ໃນຕົວທ່ອງເວັບທີ່ Page Visibility API ຮອງຮັບ, carousel ຈະຫຼີກລ່ຽງການເລື່ອນເມື່ອຫນ້າເວັບບໍ່ເຫັນກັບຜູ້ໃຊ້ (ເຊັ່ນ: ເມື່ອແຖບຕົວທ່ອງເວັບບໍ່ເຄື່ອນໄຫວ, ປ່ອງຢ້ຽມຂອງຕົວທ່ອງເວັບຖືກຫຼຸດລົງ, ແລະອື່ນໆ).

ຜົນກະທົບຂອງພາບເຄື່ອນໄຫວຂອງອົງປະກອບນີ້ແມ່ນຂຶ້ນກັບການ prefers-reduced-motionສອບຖາມສື່. ເບິ່ງ ພາກສ່ວນການເຄື່ອນໄຫວທີ່ຫຼຸດລົງຂອງເອກະສານການຊ່ວຍເຂົ້າເຖິງຂອງພວກເຮົາ .

ກະລຸນາຮັບຊາບວ່າ carousels ຊ້ອນກັນບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນ, ແລະ carousels ໂດຍທົ່ວໄປແມ່ນບໍ່ປະຕິບັດຕາມມາດຕະຖານການເຂົ້າເຖິງ.

ສຸດທ້າຍ, ຖ້າທ່ານກໍາລັງສ້າງ JavaScript ຂອງພວກເຮົາຈາກແຫຼ່ງ, ມັນ ຕ້ອງການutil.js .

ຕົວຢ່າງ

Carousels ບໍ່ໄດ້ປັບຂະຫນາດສະໄລ້ໃຫ້ເປັນປົກກະຕິ. ດັ່ງນັ້ນ, ທ່ານອາດຈະຕ້ອງໃຊ້ປະໂຫຍດເພີ່ມເຕີມຫຼືຮູບແບບທີ່ກໍາຫນົດເອງເພື່ອຂະຫນາດເນື້ອຫາທີ່ເຫມາະສົມ. ໃນຂະນະທີ່ carousels ສະຫນັບສະຫນູນການຄວບຄຸມກ່ອນຫນ້າ / ຕໍ່ໄປແລະຕົວຊີ້ວັດ, ພວກມັນບໍ່ຈໍາເປັນຢ່າງຊັດເຈນ. ເພີ່ມ​ແລະ​ປັບ​ແຕ່ງ​ຕາມ​ທີ່​ທ່ານ​ເຫັນ​ເຫມາະ​.

ຫ້ອງ .activeຮຽນຈໍາເປັນຕ້ອງຖືກເພີ່ມໃສ່ຫນຶ່ງໃນ slides ຖ້າບໍ່ດັ່ງນັ້ນ carousel ຈະບໍ່ເຫັນ. ນອກຈາກນັ້ນ, ໃຫ້ແນ່ໃຈວ່າກໍານົດການເປັນເອກະລັກ idສໍາ .carouselລັບການຄວບຄຸມທາງເລືອກ, ໂດຍສະເພາະຖ້າຫາກວ່າທ່ານກໍາລັງໃຊ້ carousels ຫຼາຍຢູ່ໃນຫນ້າດຽວ. ອົງປະກອບການຄວບຄຸມແລະຕົວຊີ້ວັດຕ້ອງມີ data-targetຄຸນລັກສະນະ (ຫຼື hrefສໍາລັບການເຊື່ອມຕໍ່) ທີ່ກົງກັບ ອົງ idປະ .carouselກອບ.

ສະໄລ້ເທົ່ານັ້ນ

ນີ້ແມ່ນ carousel ທີ່ມີສະໄລ້ເທົ່ານັ້ນ. ໃຫ້ສັງເກດການປະກົດຕົວຂອງ ຮູບພາບ carousel .d-blockແລະ .w-100ໃນ carousel ເພື່ອປ້ອງກັນການຈັດລຽງຮູບພາບເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບ.

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

ດ້ວຍການຄວບຄຸມ

ເພີ່ມໃນການຄວບຄຸມທີ່ຜ່ານມາແລະຕໍ່ໄປ. ພວກເຮົາແນະນໍາໃຫ້ໃຊ້ <button>ອົງປະກອບ, ແຕ່ທ່ານຍັງສາມາດໃຊ້ <a>ອົງປະກອບທີ່ມີ role="button".

<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>
 <button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

ມີຕົວຊີ້ວັດ

ນອກນັ້ນທ່ານຍັງສາມາດເພີ່ມຕົວຊີ້ວັດໃສ່ carousel, ຄຽງຄູ່ກັບການຄວບຄຸມ, ເຊັ່ນດຽວກັນ.

<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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</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>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-target="#carouselExampleCaptions" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

ຂ້າມ

ເພີ່ມ .carousel-fadeໃສ່ carousel ຂອງທ່ານເພື່ອເຮັດສະໄລ້ແບບເຄື່ອນໄຫວດ້ວຍການປ່ຽນສີແທນການສະໄລ້. ອີງຕາມເນື້ອໃນ carousel ຂອງທ່ານ (ຕົວຢ່າງ, ຂໍ້ຄວາມພຽງແຕ່ slides), ທ່ານອາດຈະຕ້ອງການເພີ່ມ .bg-bodyຫຼືບາງ CSS custom ກັບ .carousel-items ສໍາລັບການ crossfading ທີ່ເຫມາະສົມ.

<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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleFade" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

ຕື່ມ data-interval=""ໃສ່ a .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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

ປິດ​ການ​ໃຊ້​ງານ​ການ​ປັດ​ສໍາ​ພັດ​

Carousels ຮອງຮັບການປັດປັດຊ້າຍ/ຂວາໃນອຸປະກອນໜ້າຈໍສຳຜັດເພື່ອຍ້າຍລະຫວ່າງສະໄລ້. ນີ້ສາມາດຖືກປິດໃຊ້ງານໄດ້ໂດຍໃຊ້ data-touchຄຸນລັກສະນະ. ຕົວຢ່າງຂ້າງລຸ່ມນີ້ບໍ່ໄດ້ລວມເອົາ data-rideຄຸນລັກສະນະແລະມີ data-interval="false"ສະນັ້ນມັນບໍ່ຫຼິ້ນອັດຕະໂນມັດ.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-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-target="#carouselExampleControlsNoTouching" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

ການ​ນໍາ​ໃຊ້

ຜ່ານຄຸນລັກສະນະຂໍ້ມູນ

ໃຊ້ຄຸນສົມບັດຂໍ້ມູນເພື່ອຄວບຄຸມຕຳແໜ່ງຂອງ carousel ໄດ້ຢ່າງງ່າຍດາຍ. data-slideຍອມຮັບຄໍາສໍາຄັນ prevຫຼື next, ເຊິ່ງປ່ຽນແປງຕໍາແຫນ່ງສະໄລ້ທີ່ກ່ຽວຂ້ອງກັບຕໍາແຫນ່ງປະຈຸບັນຂອງມັນ. ອີກທາງເລືອກ, ໃຊ້ data-slide-toເພື່ອຜ່ານດັດຊະນີສະໄລ້ດິບໄປຫາ carousel data-slide-to="2", ເຊິ່ງປ່ຽນຕໍາແຫນ່ງສະໄລ້ໄປຫາດັດຊະນີສະເພາະທີ່ເລີ່ມຕົ້ນດ້ວຍ 0.

ຄຸນ ສົມ data-ride="carousel"ບັດຖືກໃຊ້ເພື່ອໝາຍຮູບວົງມົນເປັນພາບເຄື່ອນໄຫວເລີ່ມຕົ້ນໃນເວລາໂຫຼດໜ້າ. ຖ້າ​ຫາກ​ວ່າ​ທ່ານ​ບໍ່​ໄດ້​ນໍາ​ໃຊ້ data-ride="carousel"​ເພື່ອ​ເລີ່ມ​ຕົ້ນ​ການ carousel ຂອງ​ທ່ານ​, ທ່ານ​ຈໍາ​ເປັນ​ຕ້ອງ​ເລີ່ມ​ຕົ້ນ​ມັນ​ຕົວ​ທ່ານ​ເອງ​. ມັນບໍ່ສາມາດຖືກນໍາໃຊ້ໃນການປະສົມປະສານກັບ (ຊ້ໍາຊ້ອນແລະບໍ່ຈໍາເປັນ) ການເລີ່ມຕົ້ນ JavaScript ຢ່າງຊັດເຈນຂອງ carousel ດຽວກັນ.

ຜ່ານ JavaScript

ໂທຫາ carousel ດ້ວຍຕົນເອງດ້ວຍ:

$('.carousel').carousel()

ທາງເລືອກ

ທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript. ສໍາລັບຄຸນລັກສະນະຂໍ້ມູນ, ຕື່ມຊື່ທາງເລືອກໃສ່ data-, ໃນ data-interval="".

ຊື່ ປະເພດ ຄ່າເລີ່ມຕົ້ນ ລາຍລະອຽດ
ໄລຍະຫ່າງ ເລກ 5000 ໄລຍະເວລາທີ່ຈະຊັກຊ້າລະຫວ່າງການຖີບເຄື່ອງອັດຕະໂນມັດ. ຖ້າ false, carousel ຈະບໍ່ຮອບວຽນອັດຕະໂນມັດ.
ແປ້ນພິມ ບູລີນ ຄວາມຈິງ ບໍ່ວ່າ carousel ຄວນຕອບສະໜອງຕໍ່ກັບເຫດການແປ້ນພິມ.
ຢຸດ​ຊົ່ວ​ຄາວ ຊ່ອຍແນ່ | ບູລີນ 'ເລື່ອນ'

ຖ້າຕັ້ງເປັນ 'hover', ຢຸດການຂີ່ຈັກຍານຂອງ carousel ໄວ້ຊົ່ວຄາວ mouseenterແລະ ສືບຕໍ່ການຖີບລົດຂອງ carousel ໃນ mouseleave. ຖ້າຕັ້ງເປັນ false, ການເລື່ອນໄປເທິງວົງວຽນຈະບໍ່ຢຸດມັນໄວ້ຊົ່ວຄາວ.

ໃນອຸປະກອນທີ່ເປີດໃຊ້ການສໍາຜັດ, ເມື່ອຕັ້ງເປັນ 'hover', ການຖີບລົດຈະຢຸດຊົ່ວຄາວ touchend(ເມື່ອຜູ້ໃຊ້ປະຕິສໍາພັນກັບ carousel ສໍາເລັດ) ສໍາລັບສອງໄລຍະ, ກ່ອນທີ່ຈະສືບຕໍ່ອັດຕະໂນມັດ. ໃຫ້ສັງເກດວ່ານີ້ແມ່ນນອກເຫນືອໄປຈາກພຶດຕິກໍາຂອງຫນູຂ້າງເທິງ.
ຂີ່ ສາຍ ບໍ່ຖືກຕ້ອງ ຫຼິ້ນ carousel ອັດຕະໂນມັດຫຼັງຈາກຜູ້ໃຊ້ຮອບລາຍການທໍາອິດດ້ວຍຕົນເອງ. ຖ້າຕັ້ງເປັນ 'carousel', ຫຼິ້ນ carousel ອັດຕະໂນມັດໃນເວລາໂຫຼດ.
ຫໍ່ ບູລີນ ຄວາມຈິງ ບໍ່ວ່າ carousel ຄວນຮອບວຽນຢ່າງຕໍ່ເນື່ອງ ຫຼືມີການຢຸດຍາກ.
ແຕະ ບູລີນ ຄວາມຈິງ ບໍ່ວ່າຈະເປັນ carousel ຄວນສະຫນັບສະຫນູນການໂຕ້ຕອບ swipe ຊ້າຍ / ຂວາໃນອຸປະກອນຫນ້າຈໍສໍາຜັດ.

ວິທີການ

ວິ​ທີ​ການ asynchronous ແລະ​ການ​ຫັນ​ປ່ຽນ​

ວິທີການ API ທັງໝົດແມ່ນ asynchronous ແລະເລີ່ມການ ຫັນປ່ຽນ . ພວກເຂົາກັບຄືນໄປຫາຜູ້ໂທທັນທີທີ່ການຫັນປ່ຽນເລີ່ມຕົ້ນແຕ່ ກ່ອນທີ່ມັນຈະສິ້ນສຸດລົງ . ນອກຈາກນັ້ນ, ການໂທຫາວິທີການກ່ຽວກັບ ອົງປະກອບຂອງການປ່ຽນແປງຈະຖືກລະເລີຍ .

ເບິ່ງເອກະສານ JavaScript ຂອງພວກເຮົາສໍາລັບຂໍ້ມູນເພີ່ມເຕີມ .

.carousel(options)

ເລີ່ມຕົ້ນ carousel ດ້ວຍຕົວເລືອກທາງເລືອກ objectແລະເລີ່ມການຂີ່ລົດຖີບຜ່ານລາຍການ.

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

.carousel('cycle')

ຮອບວຽນຜ່ານລາຍການ carousel ຈາກຊ້າຍໄປຂວາ.

.carousel('pause')

ຢຸດ carousel ຈາກການຖີບຜ່ານລາຍການ.

.carousel(number)

ວົງຈອນ carousel ໄປຫາກອບສະເພາະ (0 ໂດຍອີງຕາມ, ຄ້າຍຄືກັນກັບ array). ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ລາຍການເປົ້າຫມາຍໄດ້ຖືກສະແດງໃຫ້ເຫັນ (ເຊັ່ນ: ກ່ອນທີ່ slid.bs.carouselເຫດການຈະເກີດຂື້ນ).

.carousel('prev')

ຮອບວຽນໄປຫາລາຍການກ່ອນໜ້າ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຈະສະແດງລາຍການທີ່ຜ່ານມາ (ເຊັ່ນ: ກ່ອນທີ່ slid.bs.carouselເຫດການຈະເກີດຂື້ນ).

.carousel('next')

ຮອບວຽນໄປຫາລາຍການຕໍ່ໄປ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຈະສະແດງລາຍການຕໍ່ໄປ (ເຊັ່ນ: ກ່ອນທີ່ slid.bs.carouselເຫດການຈະເກີດຂື້ນ).

.carousel('dispose')

ທໍາລາຍ carousel ຂອງອົງປະກອບໃດຫນຶ່ງ.

.carousel('nextWhenVisible')

ຫ້າມລໍ້ເລື່ອນໄປຂ້າງໜ້າເມື່ອບໍ່ເຫັນໜ້າ ຫຼື ວົງວຽນ ຫຼື ພໍ່ແມ່ຂອງມັນບໍ່ເຫັນ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຈະສະແດງລາຍການຕໍ່ໄປ (ເຊັ່ນ: ກ່ອນທີ່ slid.bs.carouselເຫດການຈະເກີດຂື້ນ).

.carousel('to')

ວົງຈອນ carousel ໄປຫາກອບສະເພາະ (0 ໂດຍອີງຕາມ, ຄ້າຍຄືກັນກັບ array). ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຈະສະແດງລາຍການຕໍ່ໄປ (ເຊັ່ນ: ກ່ອນທີ່ slid.bs.carouselເຫດການຈະເກີດຂື້ນ).

ເຫດການ

ຫ້ອງຮຽນ carousel ຂອງ Bootstrap ເປີດເຜີຍສອງເຫດການສໍາລັບການເຊື່ອມໂຍງກັບການເຮັດວຽກຂອງ carousel. ທັງສອງເຫດການມີຄຸນສົມບັດເພີ່ມເຕີມດັ່ງຕໍ່ໄປນີ້:

  • direction: ທິດທາງທີ່ carousel ເລື່ອນ (ບໍ່ວ່າຈະ "left"ຫຼື "right").
  • relatedTarget: ອົງປະກອບ DOM ທີ່ຖືກເລື່ອນເຂົ້າໄປໃນສະຖານທີ່ເປັນລາຍການທີ່ເຮັດວຽກ.
  • from: ດັດຊະນີຂອງລາຍການປະຈຸບັນ
  • to: ດັດຊະນີຂອງລາຍການຕໍ່ໄປ

ເຫດການ carousel ທັງຫມົດແມ່ນ fired ຢູ່ carousel ຕົວຂອງມັນເອງ (ie at the <div class="carousel">).

ປະເພດເຫດການ ລາຍລະອຽດ
slide.bs.carousel ເຫດການນີ້ໄຟໄຫມ້ທັນທີເມື່ອ slideວິທີການຕົວຢ່າງຖືກເອີ້ນ.
slide.bs.carousel ເຫດການນີ້ຈະຖືກດັບໄຟເມື່ອ carousel ໄດ້ສໍາເລັດການປ່ຽນສະໄລ້ຂອງມັນ. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

ປ່ຽນໄລຍະເວລາການປ່ຽນ

ໄລຍະເວລາຂອງ .carousel-itemການປ່ຽນແປງສາມາດປ່ຽນແປງໄດ້ດ້ວຍ $carousel-transitionຕົວແປ Sass ກ່ອນທີ່ຈະລວບລວມຫຼືຮູບແບບທີ່ກໍາຫນົດເອງຖ້າທ່ານໃຊ້ CSS ທີ່ລວບລວມ. ຖ້າ​ຫາກ​ວ່າ​ການ​ຫັນ​ປ່ຽນ​ຫຼາຍ​ແມ່ນ​ໄດ້​ຮັບ​ການ​ນໍາ​ໃຊ້​, ໃຫ້​ແນ່​ໃຈວ່​າ​ການ​ຫັນ​ປ່ຽນ​ການ​ຫັນ​ປ່ຽນ​ໄດ້​ຖືກ​ກໍາ​ນົດ​ໄວ້​ກ່ອນ (ເຊັ່ນ​: transition: transform 2s ease, opacity .5s ease-out)​.