web-dev-qa-db-fra.com

Twitter Bootstrap Lecture automatique du carrousel à la charge

À l'aide de Twitter bootstrap framework, comment est-il possible d'invoquer le carrousel à "diapositive automatique". Cela signifie que lorsque la page se charge, le carrousel défile automatiquement.

J'ai essayé une fonction de clic javascript onLoad pour le <a> du lien suivant, mais cela n'a pas fonctionné.

javascripttwitter-bootstrapcarousel
19
user2132041

vous devez faire comme le dit Twitter Bootstrap Documentation à propos du carrousel, donc définissez le premier élément de diapositive du carrousel avec class = "active" et initialisez les js pour le carrousel de cette manière:

$(function(){
    $('.carousel').carousel({
      interval: 2000
    });
});

alors si cela ne suffit pas (mais cela ne m'est jamais arrivé), utilisez la force brute déclenchant le clic survolez les boutons de commande du carrousel comme ceci:

$(function(){
$('.carousel').carousel({
      interval: 2000
    });
$('.carousel-control.right').trigger('click');
});

mais ce n'est qu'une astuce non nécessaire, vraiment, suivez simplement la documentation!

47
itsme

Simple. Vous manquez l'attribut "data-ride" dans la div.

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

24
Dan

Comme selon la documentation , vous devez initialiser le plugin Carousel via JavaScript. L'exemple de carrousel sur la page de documentation officielle Bootstrap est initialisé dans le fichier application.js sur les lignes 67-68:

// carousel demo
$('#myCarousel').carousel()

ce qui lui donne les paramètres par défaut.

Si vous souhaitez spécifier l'intervalle de cycle, vous pouvez définir la propriété interval en millisecondes:

$('.carousel').carousel({
  interval: 2000
})
8
merv

Mettez-le dans le bloc prêt pour le document, faites-le démarrer automatiquement pour moi

$(document).ready(function() {
$('#myCarousel').carousel();
});
6
Panuwizzle

<div id="myCarousel" class="carousel slide" data-ride="carousel"> fonctionne pour moi, ce qui me manquait était l'attribut data-ride.

J'espère que cela aidera beaucoup de gens. Merci stackoverflow, vous m'avez été très utile pour la plupart des raisons. Je suis content que cette communauté existe.

3
Grateful developer

Vous pouvez utiliser l'attribut data-interval sur le balisage html pour la lecture automatique:

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

intervalle de données: durée en millisecondes pour retarder le cycle automatique d'un élément. S'il est faux, le carrousel ne cyclera pas automatiquement.

1
Milox
<header id="myCarousel" class="carousel slide">

VOUS AVEZ BESOIN D'AJOUTER

data-ride="carousel"

<header id="myCarousel" class="carousel slide" data-ride="carousel">
1
Николай Шеломенцев

Ajoutez simplement data-interval="5000" au div avec l'IP carouselExampleIndicators.

Comme ça:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="5000">
0
2567910