web-dev-qa-db-fra.com

Est-il possible d'empêcher la pause du carrousel Bootstrap au survol de la souris et de continuer automatiquement le cycle?

Est-il possible d'empêcher la pause du carrousel Bootstrap sur le comportement de survol de la souris et de continuer à parcourir automatiquement les éléments à la place?

La documentation ne mentionne que le comportement par défaut de pause: "hover", si je change l'argument pause en autre chose, le carrousel cesse de fonctionner, donc je ne sais pas comment désactiver ce comportement par défaut.

javascripthovertwitter-bootstrap
43
Andy Bowskill

J'ai constaté qu'une valeur de "false" fera en sorte que le carrousel continue de rouler pendant un survol:

$('.carousel').carousel({
    pause: "false"
});

J'utilise Twitter Bootstrap v2.0.2

81
xcer

Vous pouvez également l'ajouter au carrousel div au lieu d'utiliser javascript.

Ajouter un temps de retard:

data-interval="3000"

Ajouter s'il s'arrête en survol ou non, les options sont true et false

data-pause="false"

Un exemple serait:

<div id="carousel" class="carousel" data-ride="carousel" data-interval="3000" data-pause="false">

Cela a fonctionné pour moi.

47
JCBrown
$('.carousel').carousel({
        pause: 'none'
    })

pour Bootstrap v3.3.4

7
wpdevramki

Bootstrap 4 Supprimer la pause au survol

$('.carousel').carousel({
    interval: 2000,
    cycle: true,
    pause: "null"
})
2
Abdul Razak

Pour tous ceux qui visitent encore ce fil, dans la version la plus récente de 4.1.3, utilisez null sans guillemets. Peut-être que des citations étaient requises dans les versions précédentes de la v.4, mais ce n'est pas le cas maintenant:

$('.carousel').carousel({
    interval: 2000,
    cycle: true,
    pause: null
})
1
Nicholas Rotondo

J'ai trouvé qu'il y a 2 choses dont dépendent ce cycle et cette pause.

  1. Lorsque la souris entre (mouseenter - pause coulissante)
  2. Lorsque la souris quitte (mouseleave - reprendre le glissement)

Modifiez simplement la ligne de code suivante dans votre fichier js/bootstrap.js pour permettre un glissement continu.

.on('mouseenter', $.proxy(this.pause, this)) à

.on('mouseenter', $.proxy(this.**cycle**, this))

0
Yogesh Chaudhari