Bootstrap Carousel: Xóa trang trình bày tự động

119

Tôi đang sử dụng Bootstrap Carousel. Tất cả những gì tôi muốn là thanh trượt sẽ chỉ trượt khi điều hướng hoặc phân trang được nhấp vào. Tôi đã thử xóa

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

Nó hoạt động tốt nhưng vấn đề của tôi là khi tôi đã nhấp vào điều hướng hoặc phân trang, nó hiện đang tự động trượt. Có thể bỏ chức năng trượt tự động không? Nếu vậy, làm thế nào?

javascript jquery twitter-bootstrap

— khatzie
nguồn

225

Bạn có thể làm điều này theo 2 cách, thông qua js hoặc html (Phục sinh)

Qua js

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

Điều đó sẽ làm cho quá trình trượt tự động dừng lại vì không có thêm Mili giây nào và sẽ không bao giờ trượt tiếp theo.

Qua Html Bằng cách thêm data-interval="false"và bớtdata-ride="carousel"

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

trở thành:

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

được cập nhật dựa trên nhận xét của @ webMan

— Iliya Reyzis
nguồn

38

cũng loại bỏ data-ride="carousel"... và cú pháp chính xác cho nội tuyến:data-interval="false"

— webMan

111

Từ các tài liệu chính thức :

Khoảng thời gian để trì hoãn giữa việc tự động xoay một mục. Nếu sai , băng chuyền sẽ không tự động xoay vòng.

Bạn có thể chuyển giá trị này bằng javascript hoặc sử dụng data-interval="false"thuộc tính.

— Diego Agulló
nguồn

9

cảm ơn cho = dữ liệu khoảng thời gian 'false', tùy chọn dễ dàng nếu bạn đang sử dụng một the-bootstrapchủ đề trong Wordpress

— toto_tico

32

data-interval="false"là giải pháp tốt hơn nhiều, không cần chạm vào bootstrap JS!

— lxg

2

Điều này không hiệu quả đối với tôi <div class = "carousel slide" data-ride = "carousel" id = "carousel-ex" data-period = "false"> <div class = "carousel-inner"> .... và không có gì ... vẫn autosliding

— Lachezar Raychev

Điều này thực sự đơn giản hơn nhiều đối với các trường hợp đơn giản, nhưng hãy nhớ rằng đó là một thiết kế tốt hơn nhiều để sử dụng tùy chỉnh của bạn scripts.jsvà không viết mã script trong html! ;)

— cregox

55

Bạn chỉ cần thêm một thuộc tính nữa vào thẻ DIV của mình, đó là

data-interval="false"

không cần phải chạm vào JS!

— Nikunj Dhimar
nguồn

36

Thay đổi / Thêm vào data-period = "false" trên div carousel

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

— Arun
nguồn

7

Hãy thử như sau:

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

— Nikit Barochiya
nguồn

1

Đó là cái duy nhất làm việc với tôi trong thời gian chạy bằng bảng điều khiển.

— Bishoy Hanna

4

data-khoảng = "false"

Thêm cái này vào div tương ứng ...

3

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

Bằng cách sử dụng tập lệnh trên, bạn sẽ có thể di chuyển hình ảnh tự động

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

Bằng việc sử dụng kịch bản trên, auto-rotationsẽ bị chặn vì intervallàfalse

— Nitin Anvekar
nguồn