Bootstrap Carousel: Hapus slide otomatis

120

Saya menggunakan Bootstrap Carousel. Yang saya inginkan adalah slider hanya akan bergeser ketika navigasi atau pagination diklik. Saya sudah mencoba menghapus

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

Ini berfungsi dengan baik tetapi masalah saya adalah setelah saya mengklik navigasi atau pagination, sekarang geser otomatis. Apakah mungkin untuk menghapus fungsi geser otomatis? Jika ya, bagaimana caranya?

javascript jquery twitter-bootstrap khatzie
sumber

Jawaban:

227

Anda dapat melakukan ini dengan 2 cara, melalui js atau html (easist)

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

Itu akan membuat penggeser otomatis berhenti karena tidak ada milidetik yang ditambahkan dan tidak akan pernah penggeser berikutnya.

  1. Via Html Dengan menambah data-interval="false"dan menghapusdata-ride="carousel"
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">

menjadi:

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

diperbarui berdasarkan komentar @ webMan

Iliya Reyzis
sumber
38
singkirkan juga data-ride="carousel"... dan sintaks yang benar untuk inline:data-interval="false"
webMan
111

Dari dokumen resmi :

interval Jumlah waktu jeda antara bersepeda item secara otomatis. Jika salah , carousel tidak akan berputar secara otomatis.

Anda dapat meneruskan nilai ini dengan javascript atau menggunakan data-interval="false"atribut.

Diego Agulló
sumber
9
terima kasih untuk data-interval = 'false', opsi mudah jika Anda menggunakan the-bootstraptema di Wordpress
toto_tico
32
data-interval="false"adalah solusi yang jauh lebih baik, tidak perlu menyentuh bootstrap JS!
lxg
2
Ini tidak berfungsi untuk saya <div class = "carousel slide" data-ride = "carousel" id = "carousel-ex" data-interval = "false"> <div class = "carousel-inner"> .... dan tidak ada ... masih meluncur otomatis
Lachezar Raychev
Ini memang jauh lebih sederhana untuk kasus sederhana, tetapi perlu diingat bahwa ini adalah desain yang jauh lebih baik untuk menggunakan kustom Anda scripts.jsdan tidak menyimpan kode skrip di html! ;)
cregox
55

Anda hanya perlu menambahkan satu atribut lagi ke tag DIV Anda yaitu

data-interval="false"

tidak perlu menyentuh JS!

Nikunj Dhimar
sumber
36

Ubah / Tambahkan ke data-interval = "false" pada div carousel

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

Silakan coba yang berikut ini:

<script>
    $(document).ready(function() {      
        $('.carousel').carousel('pause');
    });
</script>
Nikit Barochiya
sumber
1
Itu satu-satunya yang bekerja dengan saya saat menjalankan menggunakan konsol.
Bishoy Hanna
4

data-interval = "false"

Tambahkan ini ke div yang sesuai ...


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

Dengan menggunakan script di atas, Anda akan dapat memindahkan gambar secara otomatis

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

Dengan menggunakan script diatas, auto-rotationakan terblokir karena intervalsedangfalse

Nitin Anvekar
sumber