Carousel

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

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

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

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

ກະລຸນາຮັບຊາບວ່າ 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 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>

ມີຕົວຊີ້ວັດ

ນອກນັ້ນທ່ານຍັງສາມາດເພີ່ມຕົວຊີ້ວັດໃສ່ 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 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ໃສ່ carousel ຂອງທ່ານເພື່ອເຮັດສະໄລ້ແບບເຄື່ອນໄຫວດ້ວຍການປ່ຽນສີແທນການສະໄລ້.

ທີ່ຜ່ານມາ ຕໍ່ໄປ

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

ການ​ນໍາ​ໃຊ້

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

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

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

ຜ່ານ JavaScript

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

$('.carousel').carousel()

ທາງເລືອກ

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

ວິທີການ

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

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

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

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