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>

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

ເພີ່ມໃນການຄວບຄຸມກ່ອນໜ້າ ແລະຕໍ່ໄປ:

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

ມີຕົວຊີ້ວັດ

ນອກນັ້ນທ່ານຍັງສາມາດເພີ່ມຕົວຊີ້ວັດໃສ່ 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>
  <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 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>Nulla vitae elit libero, a pharetra augue mollis interdum.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

ຂ້າມ

ເພີ່ມ .carousel-fadeໃສ່ carousel ຂອງທ່ານເພື່ອເຮັດສະໄລ້ແບບເຄື່ອນໄຫວດ້ວຍການປ່ຽນສີແທນການສະໄລ້.

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

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

ຕື່ມ 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>
  <a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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	ໄລຍະເວລາທີ່ຈະຊັກຊ້າລະຫວ່າງການຖີບເຄື່ອງອັດຕະໂນມັດ. ຖ້າເປັນຜິດ, carousel ຈະບໍ່ຮອບວຽນອັດຕະໂນມັດ.
ແປ້ນພິມ	ບູລີນ	ຄວາມຈິງ	ບໍ່ວ່າ carousel ຄວນຕອບສະໜອງຕໍ່ກັບເຫດການແປ້ນພິມ.
ຢຸດຊົ່ວຄາວ	ຊ່ອຍແນ່ \| ບູລີນ	"ເລື່ອນ"	ຖ້າຕັ້ງເປັນ `"hover"`, ຢຸດການຂີ່ຈັກຍານຂອງ carousel ໄວ້ຊົ່ວຄາວ `mouseenter`ແລະ ສືບຕໍ່ການຖີບລົດຂອງ carousel ໃນ `mouseleave`. ຖ້າຕັ້ງເປັນ `false`, ການເລື່ອນໄປເທິງວົງວຽນຈະບໍ່ຢຸດມັນໄວ້ຊົ່ວຄາວ. ໃນອຸປະກອນທີ່ເປີດໃຊ້ການສໍາຜັດ, ເມື່ອຕັ້ງເປັນ `"hover"`, ການຖີບລົດຈະຢຸດຊົ່ວຄາວ `touchend`(ເມື່ອຜູ້ໃຊ້ປະຕິສໍາພັນກັບ carousel ສໍາເລັດ) ສໍາລັບສອງໄລຍະ, ກ່ອນທີ່ຈະສືບຕໍ່ອັດຕະໂນມັດ. ໃຫ້ສັງເກດວ່ານີ້ແມ່ນນອກເຫນືອໄປຈາກພຶດຕິກໍາຂອງຫນູຂ້າງເທິງ.
ຂີ່	ສາຍ	ບໍ່ຖືກຕ້ອງ	ຫຼິ້ນ carousel ອັດຕະໂນມັດຫຼັງຈາກຜູ້ໃຊ້ຮອບລາຍການທໍາອິດດ້ວຍຕົນເອງ. ຖ້າ "carousel", autoplay 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 ຂອງ 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).