Carousel

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

ໃນໜ້ານີ້

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

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

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

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

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

ຕົວຢ່າງ

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

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

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

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

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>

ມີຕົວຊີ້ວັດ

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

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

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=""ໃສ່ a .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>

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

Carousels ຮອງຮັບການປັດປັດຊ້າຍ/ຂວາໃນອຸປະກອນໜ້າຈໍສຳຜັດເພື່ອຍ້າຍລະຫວ່າງສະໄລ້. ນີ້ສາມາດຖືກປິດໃຊ້ງານໄດ້ໂດຍໃຊ້ 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ການ .carouselຄວບຄຸມ, ຕົວຊີ້ບອກ ແລະຄຳບັນຍາຍທີ່ມືດກວ່າ. ການຄວບຄຸມໄດ້ຖືກ inverted ຈາກຄ່າເລີ່ມຕົ້ນຂອງເຂົາເຈົ້າຕື່ມຂໍ້ມູນໃສ່ສີຂາວທີ່ມີ filterຄຸນສົມບັດ CSS. ຄຳບັນຍາຍ ແລະການຄວບຄຸມມີຕົວແປ 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>

ການຫັນປ່ຽນແບບກຳນົດເອງ

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

ຊາສ

ຕົວແປ

ຕົວແປສໍາລັບ carousels ທັງຫມົດ:

$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 ຊ້ໍາ :

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

ການນໍາໃຊ້

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

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

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

ຜ່ານ JavaScript

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

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 string. ເມື່ອອົງປະກອບມີ data-bs-config='{"delay":0, "title":123}'ແລະ data-bs-title="456"ຄຸນລັກສະນະ, ຄ່າສຸດທ້າຍ titleຈະເປັນ 456ແລະຄຸນລັກສະນະຂອງຂໍ້ມູນແຍກຕ່າງຫາກຈະ override ຄ່າທີ່ໃຫ້ຢູ່ໃນ data-bs-config. ນອກຈາກນັ້ນ, ຄຸນລັກສະນະຂໍ້ມູນທີ່ມີຢູ່ແມ່ນສາມາດຈັດວາງຄ່າ JSON ເຊັ່ນ data-bs-delay='{"show":0,"hide":150}'.

ຊື່	ປະເພດ	ຄ່າເລີ່ມຕົ້ນ	ລາຍລະອຽດ
`interval`	ເລກ	`5000`	ໄລຍະເວລາທີ່ຈະຊັກຊ້າລະຫວ່າງການຖີບເຄື່ອງອັດຕະໂນມັດ.
`keyboard`	ບູລີນ	`true`	ບໍ່ວ່າ carousel ຄວນຕອບສະໜອງຕໍ່ກັບເຫດການແປ້ນພິມ.
`pause`	string, boolean	`"hover"`	ຖ້າຕັ້ງເປັນ `"hover"`, ຢຸດການຂີ່ຈັກຍານຂອງ carousel ໄວ້ຊົ່ວຄາວ `mouseenter`ແລະ ສືບຕໍ່ການຖີບລົດຂອງ carousel ໃນ `mouseleave`. ຖ້າຕັ້ງເປັນ `false`, ການເລື່ອນໄປເທິງວົງວຽນຈະບໍ່ຢຸດມັນໄວ້ຊົ່ວຄາວ. ໃນອຸປະກອນທີ່ເປີດໃຊ້ການສໍາຜັດ, ເມື່ອຕັ້ງເປັນ `"hover"`, ການຖີບລົດຈະຢຸດຊົ່ວຄາວ `touchend`(ເມື່ອຜູ້ໃຊ້ປະຕິສໍາພັນກັບ carousel ສໍາເລັດ) ສໍາລັບສອງໄລຍະ, ກ່ອນທີ່ຈະສືບຕໍ່ອັດຕະໂນມັດ. ນີ້ແມ່ນນອກເຫນືອໄປຈາກພຶດຕິກໍາຂອງຫນູ.
`ride`	string, boolean	`false`	ຖ້າຕັ້ງເປັນ `true`, ຫຼິ້ນ carousel ອັດຕະໂນມັດຫຼັງຈາກຜູ້ໃຊ້ຮອບລາຍການທໍາອິດດ້ວຍຕົນເອງ. ຖ້າຕັ້ງເປັນ `"carousel"`, ຫຼິ້ນ carousel ອັດຕະໂນມັດໃນເວລາໂຫຼດ.
`touch`	ບູລີນ	`true`	ບໍ່ວ່າຈະເປັນ carousel ຄວນສະຫນັບສະຫນູນການໂຕ້ຕອບ swipe ຊ້າຍ / ຂວາໃນອຸປະກອນຫນ້າຈໍສໍາຜັດ.
`wrap`	ບູລີນ	`true`	ບໍ່ວ່າ carousel ຄວນຮອບວຽນຢ່າງຕໍ່ເນື່ອງ ຫຼືມີການຢຸດຍາກ.

ວິທີການ

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

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

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

ທ່ານສາມາດສ້າງຕົວຢ່າງ carousel ດ້ວຍຕົວສ້າງ carousel, ສໍາລັບຕົວຢ່າງ, ເພື່ອເລີ່ມຕົ້ນດ້ວຍທາງເລືອກເພີ່ມເຕີມແລະເລີ່ມຕົ້ນການຂີ່ລົດຖີບຜ່ານລາຍການ:

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

ວິທີການ	ລາຍລະອຽດ
`cycle`	ຮອບວຽນຜ່ານລາຍການ carousel ຈາກຊ້າຍໄປຂວາ.
`dispose`	ທໍາລາຍ carousel ຂອງອົງປະກອບໃດຫນຶ່ງ. (ລຶບຂໍ້ມູນທີ່ເກັບໄວ້ໃນອົງປະກອບ DOM)
`getInstance`	ວິທີການຄົງທີ່ທີ່ຊ່ວຍໃຫ້ທ່ານໄດ້ຮັບ instance carousel ທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບ DOM, ທ່ານສາມາດນໍາໃຊ້ມັນເຊັ່ນນີ້: `bootstrap.Carousel.getInstance(element)`.
`getOrCreateInstance`	ວິທີການຄົງທີ່ທີ່ຈະສົ່ງຄືນ instance carousel ທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບ DOM ຫຼືສ້າງອັນໃຫມ່ໃນກໍລະນີທີ່ມັນບໍ່ໄດ້ຖືກເລີ່ມຕົ້ນ. ທ່ານສາມາດນໍາໃຊ້ມັນເຊັ່ນນີ້: `bootstrap.Carousel.getOrCreateInstance(element)`.
`next`	ຮອບວຽນໄປຫາລາຍການຕໍ່ໄປ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ລາຍການຕໍ່ໄປໄດ້ຖືກສະແດງໃຫ້ເຫັນ (ຕົວຢ່າງ, ກ່ອນທີ່ `slid.bs.carousel`ເຫດການຈະເກີດຂື້ນ).
`nextWhenVisible`	ຫ້າມລໍ້ເລື່ອນໄປຂ້າງໜ້າ ເມື່ອໜ້າບໍ່ເຫັນ ຫຼື ວົງວຽນ ຫຼື ຫຼັກຂອງມັນບໍ່ເຫັນ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ລາຍການເປົ້າຫມາຍໄດ້ຖືກສະແດງໃຫ້ເຫັນ .
`pause`	ຢຸດ carousel ຈາກການຖີບຜ່ານລາຍການ.
`prev`	ຮອບວຽນໄປຫາລາຍການກ່ອນໜ້າ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ລາຍການທີ່ຜ່ານມາໄດ້ຖືກສະແດງ (ຕົວຢ່າງ, ກ່ອນທີ່ `slid.bs.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">).

ປະເພດເຫດການ	ລາຍລະອຽດ
`slid.bs.carousel`	ຍິງເມື່ອ carousel ໄດ້ສໍາເລັດການປ່ຽນສະໄລ້ຂອງມັນ.
`slide.bs.carousel`	ໄຟໄຫມ້ທັນທີເມື່ອ `slide`ວິທີການຕົວຢ່າງຖືກເອີ້ນ.

const myCarousel = document.getElementById('myCarousel')

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

Carousel

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

ຕົວຢ່າງ

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

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

ມີຕົວຊີ້ວັດ

ພ້ອມຄຳບັນຍາຍ

ປ້າຍສະໄລ້ທຳອິດ

ປ້າຍສະໄລ້ທີສອງ

ປ້າຍສະໄລ້ທີສາມ

ຂ້າມ

ແຕ່ລະ .carousel-itemໄລຍະ

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

ຕົວແປຊ້ໍາ

ປ້າຍສະໄລ້ທຳອິດ

ປ້າຍສະໄລ້ທີສອງ

ປ້າຍສະໄລ້ທີສາມ

ການຫັນປ່ຽນແບບກຳນົດເອງ

ຊາສ

ຕົວແປ

ການ​ນໍາ​ໃຊ້

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

ຜ່ານ JavaScript

ທາງເລືອກ

ວິທີການ

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

ເຫດການ

ແຕ່ລະ `.carousel-item`ໄລຍະ

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

ການນໍາໃຊ້

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