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

225

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

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á.

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 ...

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