web-dev-qa-db-fra.com

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

Donc, y a-t-il un moyen d'empêcher Twitter bootstrap _ carrousel de glisser automatiquement sur le chargement de la page à moins que l'utilisateur clique sur le bouton suivant ou précédent?

Merci

jquerytwitter-bootstrapcarousel
115
Tepken Vannkorn

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

254
Michal Kopec

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 en ce qui concerne cette solution.

53
Tepken Vannkorn

Le problème avec le carrousel qui glisse automatiquement après la pression du bouton précédent/suivant est résolu.

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

GitHub commit 78b927b

43
Srnux

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

exemple:

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

ajoutez ceci à votre coursel div:

data-interval="false"
10
Dylan B

Vous trouverez ci-dessous la liste des paramètres pour bootstrap carrousel. Comme Interval, pause, enveloppement:

enter image description here

Pour plus de détails, consultez ce lien:

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

J'espère que cela vous aidera :)

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

5
Vikash Pandey

Je pense que vous devriez peut-être aller vérifier les instructions officielles concernant 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 la lecture automatique s'arrête. 

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

ce script ne fait aucun effet pendant que la souris quitte cette page, exactement la zone du carrousel. aller à la définition officielle et trouver ceux-ci:

enter image description here

Vous trouverez donc pourquoi. Si la page du carrousel est déclenchée par un événement, la page se mettra en pause et, une fois sortie de la souris de cette page, elle reprendra.

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

2
Crabime

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

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

1
James

--Utilisez data-interval = "false" pour arrêter le glissement automatique --Utilisez data-wrap = "false" pour arrêter le glissement circulaire

1
Anil Kumar Ram