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
source

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

10

ajoutez ceci à votre div coursel:

data-interval="false"

— Dylan B
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:

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

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