web-dev-qa-db-fra.com

Bootstrap 3 Carousel ne fonctionnera pas. (Oui, jQuery est chargé avant Bootstrap)

Je convertis une application en Bootstrap 3. Voici le code de la page de mon carrousel, dans son intégralité. Oui, jQuery est chargé avant le démarrage du fichier Bootstrap.js. Pour une raison quelconque, le carrousel ne fonctionnera tout simplement pas. Plus précisément: les boutons précédent/suivant ne fonctionnent pas et le carrousel ne passe pas automatiquement à la diapositive suivante.

Testé contre:

  • Safari 6.0.5
  • Chrome 28.0.1500.95
  • Firefox 23.0

... sur Mac OS X 10.8.4

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <!--[if lt IE 9]>
        <script src="" alt-src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <script src="http://code.jquery.com/jquery.js"></script>

    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-glyphicons.css" type="text/css">

    <title>Carousel Test</title>
    <meta name="description" content="">
    <meta name="keywords" content="">

    <script>
        // Added this just so I didn't have to wait 5 seconds to see if the transition worked. //
        $(document).ready(function() {
            $('#Carousel').carousel({
                interval:   1000
            });
        });
    </script>
</head>

<body>
    <div id="Carousel" class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="Carousel" data-slide-to="0" class="active"></li>
            <li data-target="Carousel" data-slide-to="1"></li>
            <li data-target="Carousel" data-slide-to="2"></li>
        </ol>

        <div class="carousel-inner">
            <div class="item active">
                <img src="img/Carousel/001.jpg">
            </div>
        </div>

        <div class="carousel-inner">
            <div class="item">
                <img src="img/Carousel/002.jpg">
            </div>
        </div>

        <div class="carousel-inner">
            <div class="item">
                <img src="img/Carousel/003.jpg">
            </div>
        </div>

        <a class="left carousel-control" href="#Carousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#Carousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</body>
</html>

Quelqu'un sait pourquoi cela ne fonctionne pas?

jquerytwitter-bootstrapcarouseltwitter-bootstrap-3
10
David Byers

Essayez un carousel-inner avec plusieurs items à l'intérieur ..

<div id="Carousel" class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="Carousel" data-slide-to="0" class="active"></li>
            <li data-target="Carousel" data-slide-to="1"></li>
            <li data-target="Carousel" data-slide-to="2"></li>
        </ol>

        <div class="carousel-inner">
            <div class="item active">
                <img src="img/Carousel/001.jpg">
            </div>
            <div class="item">
                <img src="img/Carousel/002.jpg">
            </div>
            <div class="item">
                <img src="img/Carousel/003.jpg">
            </div>
        </div>

        <a class="left carousel-control" href="#Carousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#Carousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>

Démo: http://bootply.com/72622

5
Zim

Une autre erreur dans ce code est que les indicateurs du carrousel ne sont pas cliquables. Ils devraient être des liens qui vous mènent au panneau approprié.

Vous devez ajouter un hashtag à la cible de données:

<li data-target="#Carousel" data-slide-to="0" class="active"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
<li data-target="#Carousel" data-slide-to="2"></li>
3
Stephen Hess

C'est pour aider quelqu'un qui était coincé comme moi malgré avoir écrit tout le code correctement. J'essayais de trouver une erreur dans le code mais tout allait bien. Ensuite, j'ai vérifié mes fichiers javascript et j'ai remarqué que leur type changeait en .js.txt . Donc je viens de le changer en .js et ça a fonctionné.

Bonne codage!

0
Vishal Chhatwani