Evitando que o carrossel de bootstrap do Twitter deslize automaticamente no carregamento da página

119

Então, há alguma maneira de evitar que o carrossel de bootstrap do Twitter deslize automaticamente no carregamento da página, a menos que o botão seguinte ou anterior seja clicado?

obrigado

jquery twitter-bootstrap carousel Tepken Vannkorn
fonte

Respostas:

263

Ou se você estiver usando o Bootstrap 3.0, você pode parar o ciclo com data-interval = "false" por exemplo

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

Outros atributos de dados de carrossel úteis estão aqui -> http://getbootstrap.com/javascript/#carousel-usage

Michal Kopec
fonte
4
Esta não é 100% a resposta para a pergunta porque também impede que ela percorra o ciclo, mesmo quando um botão é clicado. Mas era exatamente o que eu procurava. Então, obrigado mesmo assim!
Tillito
3
data-interval="false"também funciona com Bootstrap 4
Ionuț Ciuta 01 de
53

Na verdade, o problema agora está resolvido. Eu adicionei o argumento 'pause' ao método 'carrossel' como abaixo:

$(document).ready(function() {      
   $('.carousel').carousel('pause');
});

De qualquer forma, muito obrigado @Yohn por suas dicas para essa solução.

Tepken Vannkorn
fonte
7
Isso começará a deslizar depois de anterior / seguinte, dê uma olhada em stackoverflow.com/a/18208327/463065 se não for o que você está procurando.
Trufa
para um mais específico seria $(function(){ $("#idName").carousel('pause'); });
entendido,
43

O problema com o carrossel deslizando automaticamente após pressionar o botão anterior / seguinte foi resolvido. 

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

GitHub commit 78b927b

Srnux
fonte
17

se você estiver usando o conjunto bootstrap 3data-interval="false" na estrutura HTML do carrossel

exemplo: 

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
marciocst
fonte
10
  • Use data-interval="false"para parar o deslizamento automático
  • Use data-wrap="false"para parar o slide circular
Anil Ram
fonte
10

adicione isso ao seu div de curso:

data-interval="false"
Dylan B
fonte
A resposta de Michael Kopec de 2 anos atrás já diz para fazer isso.
Todos os trabalhadores são essenciais
5

Abaixo está a lista de parâmetros para carrossel de bootstrap. Como intervalo, pausa, quebra:

insira a descrição da imagem aqui

Para mais detalhes consulte este link:

http://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp

Espero que isso ajude você :)

Nota: isto é para mais ajuda. Quero dizer como você pode personalizar ou alterar o comportamento padrão, uma vez que o carrossel é carregado.

Vikash Pandey
fonte
2

Acho que talvez você deva verificar as instruções oficiais sobre carrossel, para mim, não encontrei a resposta acima, por causa de várias versões do bootstrap, estou usando b4-alpha e quero que o efeito de reprodução automática pare. 

$(document).ready({
    pause:true,
    interval:false
});

este script não faz nenhum efeito enquanto o mouse sai da página, exatamente na área do carrossel. vá para a definição oficial e encontre-os:

insira a descrição da imagem aqui

Portanto, você encontrará por que. Se o evento da página do carrossel no mouseover for disparado, a página será pausada, enquanto o mouse fora dessa página, ela será retomada novamente.

Portanto, se você quiser que a página pare para sempre e gire manualmente , basta definir data-interval='false'.

Crabime
fonte
1

--Use data-interval = "false" para parar o slide automático --Use data-wrap = "false" para parar o slide circular

...
Anil Kumar Ram
fonte
1

Para Bootstrap 4, simplesmente remova o 'data-ride = "carrossel"' da div do carrossel. Isso remove a reprodução automática no momento do carregamento.

Para habilitar a reprodução automática novamente, você ainda terá que usar a chamada "play" em javascript.

James
fonte