javascript - Bootstrap Carousel : ลบการเลื่อนอัตโนมัติ

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

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

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

คำตอบ #1

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

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

คำตอบ #2

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

ช่วงเวลา จำนวนเวลาที่จะหน่วงระหว่างการหมุนไอเท็มโดยอัตโนมัติ ถ้า false คารูเซลจะไม่หมุนโดยอัตโนมัติ

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

คำตอบ #3

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

data-interval="false"

ไม่จำเป็นต้องแตะต้อง JS!

คำตอบ #4

เปลี่ยน/เพิ่มเป็น data-interval="false" บน div ของแครูเซล

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

คำตอบ #5

ใน Bootstrap v5 ใช้: data-bs-interval="false"

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