Empêcher le carrousel de bootstrap de Twitter de glisser automatiquement lors du chargement de la page

119

Alors, y a-t-il de toute façon pour empêcher le carrousel de bootstrap de Twitter de glisser automatiquement sur le chargement de la page à moins que le bouton suivant ou précédent ne soit cliqué?

Merci

jquery twitter-bootstrap carousel Tepken Vannkorn
la source

Réponses:

263

Ou si vous utilisez Bootstrap 3.0, vous pouvez arrêter le cycle avec data-interval = "false" par exemple

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

D'autres attributs de données de carrousel utiles sont disponibles ici -> http://getbootstrap.com/javascript/#carousel-usage

Michal Kopec
la source
4
Ce n'est pas à 100% la réponse à la question, car cela l'empêche également de faire un cycle même lorsqu'un bouton est cliqué. Mais c'était exactement ce que je cherchais. Alors merci quand même!
Tillito
3
data-interval="false"fonctionne également avec Bootstrap 4
Ionuț Ciuta
53

En fait, le problème est maintenant résolu. J'ai ajouté l'argument 'pause' à la méthode 'carrousel' comme ci-dessous:

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

Quoi qu'il en soit, merci beaucoup @Yohn pour vos conseils vers cette solution.

Tepken Vannkorn
la source
7
Cela commencera à glisser après précédent / suivant, jetez un œil à stackoverflow.com/a/18208327/463065 si ce n'est pas ce que vous recherchez.
Trufa
pour un plus spécifique serait $(function(){ $("#idName").carousel('pause'); });
roger
43

Le problème avec le carrousel glissant automatiquement après avoir appuyé sur le bouton précédent / suivant est résolu. 

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

Commit GitHub 78b927b

Srnux
la source
17

si vous utilisez bootstrap 3 défini data-interval="false"sur la structure HTML du carrousel

exemple: 

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
marciocst
la source
10
  • Utilisez data-interval="false"pour arrêter le glissement automatique
  • Utilisez data-wrap="false"pour arrêter la glissière circulaire
Anil Ram
la source
10

ajoutez ceci à votre div coursel:

data-interval="false"
Dylan B
la source
La réponse de Michael Kopec d'il y a 2 ans dit déjà de le faire.
Tous les travailleurs sont essentiels
5

Voici la liste des paramètres du carrousel bootstrap. Comme Intervalle, pause, wrap:

entrez la description de l'image ici

Pour plus de détails, consultez ce lien:

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

J'espère que ceci vous aidera :)

Remarque: Ceci est pour une aide supplémentaire. Je veux dire comment vous pouvez personnaliser ou modifier le comportement par défaut une fois le carrousel chargé.

Vikash Pandey
la source
2

Je pense que vous devriez peut-être consulter les instructions officielles sur le carrousel, pour moi, je n'ai pas trouvé de réponse ci-dessus, à cause de plusieurs versions de bootstrap, j'utilise b4-alpha et je veux que l'effet de lecture automatique s'arrête. 

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

ce script n'a aucun effet lorsque la souris quitte cette page, exactement dans la zone de carrousel. allez à la définition officielle et trouvez ceux-ci:

entrez la description de l'image ici

Ainsi, vous trouverez pourquoi. Si l'événement onmouseover de la page du carrousel est déclenché, la page se met en pause, tandis que la souris sort de cette page, elle reprendra.

Donc, si vous voulez qu'une page s'arrête pour toujours et tourne manuellement , vous pouvez simplement définir data-interval='false'.

Crabe
la source
1

--Utilisez data-interval = "false" pour arrêter la diapositive automatique --Utilisez data-wrap = "false" pour arrêter la diapositive circulaire

...
Anil Kumar Ram
la source
1

Pour Bootstrap 4, supprimez simplement le 'data-ride = "carousel"' du div carrousel. Cela supprime la lecture automatique au moment du chargement.

Pour réactiver la lecture automatique, vous devrez toujours utiliser l'appel "play" en javascript.

James
la source