Karuzela Bootstrap: Usuń automatyczny slajd

119

Używam Bootstrap Carousel. Chcę tylko, żeby suwak przesuwał się tylko po kliknięciu nawigacji lub paginacji. Próbowałem usunąć

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

Działa dobrze, ale mój problem polega na tym, że gdy już kliknąłem nawigację lub paginację, teraz przesuwa się automatycznie. Czy można usunąć funkcję automatycznego przesuwania? Jeśli tak to jak?

javascript jquery twitter-bootstrap khatzie
źródło

Odpowiedzi:

225

Możesz to zrobić na dwa sposoby, przez js lub html (łatwe)

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

Spowoduje to zatrzymanie automatycznego przesuwania, ponieważ nie zostaną dodane żadne milisekundy i nigdy nie będzie się przesuwać.

  1. Via Html Dodając data-interval="false"i usuwającdata-ride="carousel"
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">

staje się:

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

zaktualizowane na podstawie komentarza @ webMan

Iliya Reyzis
źródło
38
pozbyć się także data-ride="carousel"... i poprawnej składni dla inline:data-interval="false"
webMan
111

Z oficjalnych dokumentów :

interwał Czas opóźnienia między automatycznymi cyklami elementu. Jeśli fałsz , karuzela nie będzie się automatycznie przełączać.

Możesz przekazać tę wartość za pomocą javascript lub użyć data-interval="false"atrybutu.

Diego Agulló
źródło
9
dzięki za data-interval = 'false', łatwa opcja, jeśli używasz the-bootstrapmotywu w Wordpress
toto_tico
32
data-interval="false"jest znacznie lepszym rozwiązaniem, nie trzeba dotykać bootstrapowego JS!
lxg
2
To nie działa dla mnie <div class = "carousel slide" data-ride = "carousel" id = "carousel-ex" data-interval = "false"> <div class = "carousel-inner"> .... i nic ... nadal autosliding
Lachezar Raychev
Jest to rzeczywiście znacznie prostsze w przypadku prostych przypadków, ale pamiętaj, że znacznie lepszym rozwiązaniem jest użycie własnego niestandardowego scripts.jskodu i brak kodowania skryptów w html! ;)
cregox
55

Wystarczy dodać jeszcze jeden atrybut do swojego tagu DIV, którym jest

data-interval="false"

nie trzeba dotykać JS!

Nikunj Dhimar
źródło
36

Zmień / dodaj do data-interval = "false" w karuzeli div

<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="false" id="myCarousel">
Bieg
źródło
7

Spróbuj wykonać następujące czynności:

<script>
    $(document).ready(function() {      
        $('.carousel').carousel('pause');
    });
</script>
Nikit Barochiya
źródło
1
To jedyny, który pracował ze mną w czasie wykonywania przy użyciu konsoli.
Bishoy Hanna
4

data-interval = "false"

Dodaj to do odpowiedniego div ...


źródło
3 
$(document).ready(function() {
  $('#media').carousel({
    pause: true,
    interval: 40000,
  });
});

Używając powyższego skryptu, będziesz mógł automatycznie przesuwać obrazy

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

Korzystając z powyższego skryptu, auto-rotationzostanie zablokowany, ponieważ intervaljestfalse

Nitin Anvekar
źródło