Bootstrap Carousel: ลบสไลด์อัตโนมัติ

ฉันใช้ Bootstrap Carousel สิ่งที่ฉันต้องการก็คือแถบเลื่อนจะเลื่อนเมื่อมีการคลิกการนำทางหรือการแบ่งหน้าเท่านั้น ฉันได้ลองลบแล้ว

$('.carousel').carousel({
    interval: 6000
}); 

ใช้งานได้ดี แต่ปัญหาของฉันคือเมื่อฉันคลิกการนำทางหรือการแบ่งหน้าแล้วตอนนี้ก็เลื่อนอัตโนมัติ สามารถถอดฟังก์ชั่นเลื่อนอัตโนมัติได้หรือไม่? ถ้าเป็นอย่างไร

คุณสามารถทำได้ 2 วิธีผ่าน js หรือ html (easist)

1. ทาง js

$('.carousel').carousel({
  interval: false,
});

นั่นจะทำให้การเลื่อนอัตโนมัติหยุดลงเนื่องจากไม่มีการเพิ่มมิลลิวินาทีและจะไม่เลื่อนต่อไป

2. ผ่าน Html โดยการเพิ่มdata-interval="false"และลบdata-ride="carousel"

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">

กลายเป็น:

<div id="carouselExampleCaptions" class="carousel slide" data-interval="false">

อัปเดตตามความคิดเห็นของ @ webMan

จากเอกสารอย่างเป็นทางการ :

ช่วงเวลาระยะเวลาที่ล่าช้าระหว่างการหมุนรายการโดยอัตโนมัติ หากเป็นเท็จม้าหมุนจะไม่วนโดยอัตโนมัติ

คุณสามารถส่งผ่านค่านี้ด้วยจาวาสคริปต์หรือใช้data-interval="false"แอตทริบิวต์

คุณต้องเพิ่มแอตทริบิวต์อีกหนึ่งรายการให้กับแท็ก DIV ของคุณซึ่งก็คือ

data-interval="false"

ไม่จำเป็นต้องสัมผัส JS!

Change / Add to data-interval = "false" บน carousel div

<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="false" id="myCarousel">

โปรดลองทำดังต่อไปนี้:

<script>
    $(document).ready(function() {      
        $('.carousel').carousel('pause');
    });
</script>

ข้อมูลช่วง = "false"

เพิ่มสิ่งนี้ใน div ที่เกี่ยวข้อง ...

$(document).ready(function() {
  $('#media').carousel({
    pause: true,
    interval: 40000,
  });
});

ด้วยการใช้สคริปต์ด้านบนคุณจะสามารถย้ายรูปภาพได้โดยอัตโนมัติ

$(document).ready(function() {
  $('#media').carousel({
    pause: true,
    interval: false,
  });
});

โดยใช้สคริปต์ด้านบนauto-rotationจะถูกบล็อกเนื่องจากintervalisfalse