Carrossel Bootstrap: Remover deslizamento automático

119

Estou usando o Bootstrap Carousel. Tudo que eu quero é que o controle deslizante só deslize quando uma navegação ou paginação for clicada. Eu tentei remover

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

Funciona bem, mas meu problema é que, depois de clicar em uma navegação ou paginação, agora é o deslizamento automático. É possível remover a função de deslizamento automático? Se sim, como?

javascript jquery twitter-bootstrap Khatzie
fonte

Respostas:

225

Você pode fazer isso de duas maneiras, via js ou html (easist)

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

Isso fará com que o deslizamento automático pare porque não há milissegundos adicionados e nunca mais deslizará.

  1. Via Html Adicionando data-interval="false"e Removendodata-ride="carousel"
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">

torna-se:

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

atualizado com base no comentário de @ webMan

Iliya Reyzis
fonte
38
livre-se também do data-ride="carousel"... e sintaxe correta para inline:data-interval="false"
webMan
111

Dos documentos oficiais :

intervalo A quantidade de tempo de atraso entre o ciclo automático de um item. Se for falso , o carrossel não circulará automaticamente.

Você pode passar esse valor com javascript ou usando um data-interval="false"atributo.

Diego agulló
fonte
9
obrigado pelo intervalo de dados = 'false', a opção fácil se você estiver usando um the-bootstraptema no Wordpress
toto_tico
32
data-interval="false"é a solução muito melhor, não há necessidade de tocar no JS de bootstrap!
lxg
2
Isso não está funcionando para mim <div class = "carousel slide" data-ride = "carousel" id = "carousel-ex" data-interval = "false"> <div class = "carousel-inner"> .... e nada ... ainda autosliding
Lachezar Raychev
Na verdade, isso é muito mais simples para casos simples, mas lembre -se de que é um design muito melhor para usar seu personalizado scripts.jse não manter nenhum script de codificação no html! ;)
cregox de
55

Você só precisa adicionar mais um atributo à sua tag DIV que é

data-interval="false"

não há necessidade de tocar em JS!

Nikunj Dhimar
fonte
36

Alterar / adicionar ao intervalo de dados = "false" no div do carrossel

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

Por favor, tente o seguinte:

<script>
    $(document).ready(function() {      
        $('.carousel').carousel('pause');
    });
</script>
Nikit Barochiya
fonte
1
Esse é o único que funcionou comigo em tempo de execução usando o console.
Bishoy Hanna
4

intervalo de dados = "falso"

Adicione isso ao div correspondente ...


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

Usando o script acima, você será capaz de mover as imagens automaticamente

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

Ao usar o script acima, auto-rotationserá bloqueado porque intervaléfalse

Nitin Anvekar
fonte