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 ເພື່ອປ້ອງກັນການຈັດລຽງຮູບພາບເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບ.
<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>
ມີຕົວຊີ້ວັດ
ນອກນັ້ນທ່ານຍັງສາມາດເພີ່ມຕົວຊີ້ວັດໃສ່ carousel, ຄຽງຄູ່ກັບການຄວບຄຸມ, ເຊັ່ນດຽວກັນ.
<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>
ຂ້າມ
ເພີ່ມ .carousel-fade
ໃສ່ carousel ຂອງທ່ານເພື່ອເຮັດສະໄລ້ແບບເຄື່ອນໄຫວດ້ວຍການປ່ຽນສີແທນການສະໄລ້.
<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
ເພື່ອປ່ຽນໄລຍະເວລາໃນການຊັກຊ້າລະຫວ່າງການຖີບລົດອັດຕະໂນມັດໄປຫາລາຍການຕໍ່ໄປ.
<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
ຄຸນລັກສະນະແລະມີ 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
ຄວບຄຸມ, ຕົວຊີ້ບອກ ແລະຄຳບັນຍາຍທີ່ມືດກວ່າ. ການຄວບຄຸມໄດ້ຖືກ inverted ຈາກຄ່າເລີ່ມຕົ້ນຂອງເຂົາເຈົ້າຕື່ມຂໍ້ມູນໃສ່ສີຂາວທີ່ມີ 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);
ການນໍາໃຊ້
ຜ່ານຄຸນລັກສະນະຂໍ້ມູນ
ໃຊ້ຄຸນສົມບັດຂໍ້ມູນເພື່ອຄວບຄຸມຕຳແໜ່ງຂອງ 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 ດ້ວຍຕົນເອງດ້ວຍ:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
ທາງເລືອກ
ທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript. ສໍາລັບຄຸນລັກສະນະຂໍ້ມູນ, ຕື່ມຊື່ທາງເລືອກໃສ່ data-bs-
, ໃນ data-bs-interval=""
.
ຊື່ | ປະເພດ | ຄ່າເລີ່ມຕົ້ນ | ລາຍລະອຽດ |
---|---|---|---|
interval |
ເລກ | 5000 |
ໄລຍະເວລາທີ່ຈະຊັກຊ້າລະຫວ່າງການຖີບເຄື່ອງອັດຕະໂນມັດ. ຖ້າ false , carousel ຈະບໍ່ຮອບວຽນອັດຕະໂນມັດ. |
keyboard |
ບູລີນ | true |
ບໍ່ວ່າ carousel ຄວນຕອບສະໜອງຕໍ່ກັບເຫດການແປ້ນພິມ. |
pause |
ຊ່ອຍແນ່ | ບູລີນ | 'hover' |
ຖ້າຕັ້ງເປັນ ໃນອຸປະກອນທີ່ເປີດໃຊ້ການສໍາຜັດ, ເມື່ອຕັ້ງເປັນ |
ride |
ຊ່ອຍແນ່ | ບູລີນ | false |
ຫຼິ້ນ carousel ອັດຕະໂນມັດຫຼັງຈາກຜູ້ໃຊ້ຮອບລາຍການທໍາອິດດ້ວຍຕົນເອງ. ຖ້າຕັ້ງເປັນ 'carousel' , ຫຼິ້ນ carousel ອັດຕະໂນມັດໃນເວລາໂຫຼດ. |
wrap |
ບູລີນ | true |
ບໍ່ວ່າ carousel ຄວນຮອບວຽນຢ່າງຕໍ່ເນື່ອງ ຫຼືມີການຢຸດຍາກ. |
touch |
ບູລີນ | true |
ບໍ່ວ່າຈະເປັນ carousel ຄວນສະຫນັບສະຫນູນການໂຕ້ຕອບ swipe ຊ້າຍ / ຂວາໃນອຸປະກອນຫນ້າຈໍສໍາຜັດ. |
ວິທີການ
ວິທີການ asynchronous ແລະການຫັນປ່ຽນ
ວິທີການ API ທັງໝົດແມ່ນ asynchronous ແລະເລີ່ມການ ຫັນປ່ຽນ . ພວກເຂົາກັບຄືນໄປຫາຜູ້ໂທທັນທີທີ່ການຫັນປ່ຽນເລີ່ມຕົ້ນແຕ່ ກ່ອນທີ່ມັນຈະສິ້ນສຸດລົງ . ນອກຈາກນັ້ນ, ການໂທຫາວິທີການກ່ຽວກັບ ອົງປະກອບຂອງການປ່ຽນແປງຈະຖືກລະເລີຍ .
ທ່ານສາມາດສ້າງຕົວຢ່າງ carousel ດ້ວຍຕົວສ້າງ carousel, ສໍາລັບຕົວຢ່າງ, ເພື່ອເລີ່ມຕົ້ນດ້ວຍທາງເລືອກເພີ່ມເຕີມແລະເລີ່ມຕົ້ນການຂີ່ລົດຖີບຜ່ານລາຍການ:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
ວິທີການ | ລາຍລະອຽດ |
---|---|
cycle |
ຮອບວຽນຜ່ານລາຍການ carousel ຈາກຊ້າຍໄປຂວາ. |
pause |
ຢຸດ carousel ຈາກການຖີບຜ່ານລາຍການ. |
prev |
ຮອບວຽນໄປຫາລາຍການກ່ອນໜ້າ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ລາຍການທີ່ຜ່ານມາໄດ້ຖືກສະແດງ (ຕົວຢ່າງ, ກ່ອນທີ່ slid.bs.carousel ເຫດການຈະເກີດຂື້ນ). |
next |
ຮອບວຽນໄປຫາລາຍການຕໍ່ໄປ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ລາຍການຕໍ່ໄປໄດ້ຖືກສະແດງໃຫ້ເຫັນ (ຕົວຢ່າງ, ກ່ອນທີ່ slid.bs.carousel ເຫດການຈະເກີດຂື້ນ). |
nextWhenVisible |
ຫ້າມລໍ້ເລື່ອນໄປຂ້າງໜ້າ ເມື່ອໜ້າບໍ່ເຫັນ ຫຼື ວົງວຽນ ຫຼື ຫຼັກຂອງມັນບໍ່ເຫັນ. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ລາຍການເປົ້າຫມາຍໄດ້ຖືກສະແດງໃຫ້ເຫັນ |
to |
ວົງຈອນ carousel ໄປຫາກອບສະເພາະ (0 ໂດຍອີງຕາມ, ຄ້າຍຄືກັນກັບ array). ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ລາຍການເປົ້າຫມາຍໄດ້ຖືກສະແດງໃຫ້ເຫັນ (ຕົວຢ່າງ, ກ່ອນທີ່ slid.bs.carousel ເຫດການຈະເກີດຂື້ນ). |
dispose |
ທໍາລາຍ carousel ຂອງອົງປະກອບໃດຫນຶ່ງ. (ລຶບຂໍ້ມູນທີ່ເກັບໄວ້ໃນອົງປະກອບ DOM) |
getInstance |
ວິທີການຄົງທີ່ທີ່ຊ່ວຍໃຫ້ທ່ານໄດ້ຮັບ instance carousel ທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບ DOM, ທ່ານສາມາດນໍາໃຊ້ມັນເຊັ່ນນີ້:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
ວິທີການຄົງທີ່ທີ່ຈະສົ່ງຄືນ instance carousel ທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບ DOM ຫຼືສ້າງອັນໃຫມ່ໃນກໍລະນີທີ່ມັນບໍ່ໄດ້ຖືກເລີ່ມຕົ້ນ. ທ່ານສາມາດນໍາໃຊ້ມັນເຊັ່ນນີ້:bootstrap.Carousel.getOrCreateInstance(element) |
ເຫດການ
ຫ້ອງຮຽນ carousel ຂອງ Bootstrap ເປີດເຜີຍສອງເຫດການສໍາລັບການເຊື່ອມໂຍງກັບການເຮັດວຽກຂອງ carousel. ທັງສອງເຫດການມີຄຸນສົມບັດເພີ່ມເຕີມດັ່ງຕໍ່ໄປນີ້:
direction
: ທິດທາງທີ່ carousel ເລື່ອນ (ບໍ່ວ່າຈະ"left"
ຫຼື"right"
).relatedTarget
: ອົງປະກອບ DOM ທີ່ຖືກເລື່ອນເຂົ້າໄປໃນສະຖານທີ່ເປັນລາຍການທີ່ເຮັດວຽກ.from
: ດັດຊະນີຂອງລາຍການປະຈຸບັນto
: ດັດຊະນີຂອງລາຍການຕໍ່ໄປ
ເຫດການ carousel ທັງຫມົດແມ່ນ fired ຢູ່ carousel ຕົວຂອງມັນເອງ (ie at the <div class="carousel">
).
ປະເພດເຫດການ | ລາຍລະອຽດ |
---|---|
slide.bs.carousel |
ໄຟໄຫມ້ທັນທີເມື່ອ slide ວິທີການຕົວຢ່າງຖືກເອີ້ນ. |
slid.bs.carousel |
ຍິງເມື່ອ carousel ໄດ້ສໍາເລັດການປ່ຽນສະໄລ້ຂອງມັນ. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})