Bootstrap Carousel: Otomatik slaydı kaldır

120

Bootstrap Carousel kullanıyorum. Tek istediğim, kaydırıcının yalnızca bir gezinme veya sayfalandırma tıklandığında kayması. Kaldırmayı denedim

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

İyi çalışıyor ama benim sorunum zaten bir navigasyonu veya sayfalandırmayı tıkladığımda, artık otomatik olarak kayıyor. Otomatik kaydırma işlevini kaldırmak mümkün mü? Öyleyse nasıl?

javascript jquery twitter-bootstrap

— khatzie
kaynak

226

Bunu js veya html (easist) aracılığıyla 2 şekilde yapabilirsiniz.

JS üzerinden

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

Bu, otomatik kaymayı durduracaktır çünkü Milisaniye eklenmez ve bir daha asla kaymaz.

Html ile Ekleyerek data-interval="false"ve kaldırarakdata-ride="carousel"

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

dönüşür:

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

@ webMan'ın yorumuna göre güncellendi

— Iliya Reyzis
kaynak

38

ayrıca data-ride="carousel"... ve satır içi için doğru sözdiziminden kurtulun :data-interval="false"

— webMan

111

Gönderen resmi dokümanlar :

interval Bir öğenin otomatik olarak çevrilmesi arasında geçecek süre. Eğer yanlış , atlıkarınca otomatik döngüsü olmaz.

Bu değeri javascript ile veya bir data-interval="false"öznitelik kullanarak iletebilirsiniz .

— Diego Agulló
kaynak

9

veri aralığı = 'false', bir kullanıyorsanız kolay bir seçenek için teşekkürler the-bootstrapWordpress tema

— toto_tico

32

data-interval="false"çok daha iyi bir çözüm, bootstrap JS'ye dokunmanıza gerek yok!

— lxg

2

Bu benim için çalışmıyor <div class = "carousel slide" data-ride = "carousel" id = "carousel-ex" data-interval = "false"> <div class = "carousel-interior"> .... ve hiçbir şey ... hala otomatik kayma

— Lachezar Raychev

Bu gerçekten basit durumlar için çok daha kolaydır, fakat yapmak akılda tutmak sizin özel kullanmak için çok daha iyi bir dizayn scripts.jsve html kodlama hiçbir komut dosyası tutmak! ;)

— cregox

55

DIV etiketinize yalnızca bir öznitelik daha eklemeniz gerekir;

data-interval="false"

JS'ye dokunmaya gerek yok!

— Nikunj Dhimar
kaynak

36

Carousel div'de data-interval = "false" değiştir / ekle

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

— Koşu
kaynak

7

Lütfen aşağıdakileri deneyin:

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

— Nikit Barochiya
kaynak

1

Konsolu kullanarak çalışma zamanında benimle çalışan tek kişi bu.

— Bishoy Hanna

4

veri aralığı = "yanlış"

Bunu ilgili div'e ekleyin ...

3

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

Yukarıdaki komut dosyasını kullanarak, görüntüleri otomatik olarak taşıyabileceksiniz.

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

Yukarıdaki komut dosyası kullanarak, auto-rotationçünkü engellenecektir intervalolduğunufalse

— Nitin Anvekar
kaynak