Bootstrap Carrousel: les Indicateurs de cyclisme pas

Je suis en train de mettre en œuvre le carrousel de Bootstrap.

Tout fonctionne bien sauf le carrousel des indicateurs ('.carrousel-indicateurs) ne sont pas à vélo à travers les diapositives.

Ici est complètement dépouillé vers le bas de la page:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<meta name="description" content="">
<title>Test Home Page</title>
<link href="http://s3.amazonaws.com/stockpr-test-store/esph2/files/css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
    li.active {
        color:red;
    }
</style>
</head>
<body>
    <div class="container">
    <h1>Test</h1>
        <div id="myCarousel" class="carousel slide">
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- Carousel items -->
            <div class="carousel-inner">
                <div class="active item"><img src="http://dummyimage.com/960x500/fff/000" alt="Slide 1"></div>
                <div class="item"><img src="http://dummyimage.com/960x500/fff/000" alt="Slide 2"></div>
                <div class="item"><img src="http://dummyimage.com/960x500/fff/000" alt="Slide 3"></div>
            </div>
            <!-- Carousel nav -->
            <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>
    </div><!--//container-->

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://s3.amazonaws.com/stockpr-test-store/esph2/files/js/bootstrap.min.js"></script>
<script>
$('.carousel').carousel();
</script>
</body>

C'est presque une copie exacte de l'exemple sur http://twitter.github.com/bootstrap/javascript.html#carousel. Toutes les idées pour lesquelles ils ne seraient pas en glissement?

Si vous examinez les indicateurs alors que le carrousel est glissant la classe active apparaître et disparaître de la LI éléments?
Aucune indication de mouvement lors de l'inspection de l'élément. Vous pouvez utiliser dev.magzalez.com/bootstrap-questions.html pour voir une version live de l'exemple.
J'obtiens une page non trouvée pour cette url.
Ah, votre lien est faux, il devrait être dev.magzalez.com/bootstrap-question.html (pas de " s " sur la question)
Vous devez mettre à jour votre fichier javascript de bootstrap.

OriginalL'auteur magzalez | 2013-02-12

  1. 13

    Mise à jour de votre fichier d'Amorçage fichier css et un fichier JavaScript les versions les plus récentes.

    Regarde comme il y avait une mise à jour entre le moment où j'ai commencé le projet (la semaine dernière) et maintenant. Merci!
    heureux d'être de l'aide 🙂

    OriginalL'auteur Billy Moat

  2. 7

    Je ne pouvais pas obtenir le mien de travail (aucune idée de ce qui se passait) mais voici comment je l'ai eu pour ressembler à cela:

    HTML

    <div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="myCarousel-target active"></li>
        <li data-target="#myCarousel" data-slide-to="1" class="myCarousel-target"></li>
        <li data-target="#myCarousel" data-slide-to="2" class="myCarousel-target"></li>
    </ol>
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div data-slide-no="0" class="item carousel-item active"><img src="http://dummyimage.com/960x500/fff/000" alt="Slide 1"></div>
        <div data-slide-no="1" class="item carousel-item"><img src="http://dummyimage.com/960x500/fff/000" alt="Slide 2"></div>
        <div data-slide-no="2" class="item carousel-item"><img src="http://dummyimage.com/960x500/fff/000" alt="Slide 3"></div>
    </div>
</div>

    JavaScript

    <script type="text/javascript">
    $(function() {
        $('#myCarousel').carousel({interval: 2000});
        $('#myCarousel').on('slid', function() {
            var to_slide = $('.carousel-item.active').attr('data-slide-no');
            $('.myCarousel-target.active').removeClass('active');
            $('.carousel-indicators [data-slide-to=' + to_slide + ']').addClass('active');
        });
        $('.myCarousel-target').on('click', function() {
            $('#myCarousel').carousel(parseInt($(this).attr('data-slide-to')));
            $('.myCarousel-target.active').removeClass('active');
            $(this).addClass('active');
        });
    });
</script>

    Cheers!

    Je ne sais pas pourquoi mon manège n'était pas un travail, mais d'ajouter manuellement la ci-dessus n'a résoudre mon problème.

    OriginalL'auteur Wallter

  3. 5

    Ici, il est

    <div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div id="0" class="item active">
<img src="image/snow1.jpg" alt="">
<div class="carousel-caption">
<h4>First Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div id="1" class="item">
<img src="image/snow2.jpg" alt="">
<div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div> 
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
<script>
$(document).ready(function() {
$('.carousel').carousel();
$('.carousel').on('slid', function() {
var to_slide = $('.carousel-inner .item.active').attr('id');
$('.carousel-indicators').children().removeClass('active');
$('.carousel-indicators [data-slide-to=' + to_slide + ']').addClass('active');
});
});
</script>

    Espère que ça va vous aider à

    FonkyJu, cela ressemble à une bonne solution! et il fonctionne. Merci.
    Cela fonctionne également si l'indicateur n'est pas cliquable

    OriginalL'auteur FonkyJu

  4. 0

    J'ai eu le même problème et je l'ai résolu simplement à la suppression bootstrap-carousel.js de dossier /js!

    OriginalL'auteur Robert Novak