it-swarm.com.de

Bootstrap 3 Carousel funktioniert nicht. (Ja, ich habe jQuery vor Bootstrap geladen)

Ich konvertiere eine Anwendung zu Bootstrap 3. Hier ist der Code für meine Beispielkarussell-Seite. Ja, ich habe jQuery geladen, bevor die Bootstrap.js geladen wird. Aus irgendeinem Grund funktioniert das Karussell einfach nicht. Im Einzelnen: Die Schaltflächen Zurück/Weiter funktionieren nicht und das Karussell springt nicht automatisch zur nächsten Folie.

Getestet gegen:

  • Safari 6.0.5
  • Chrome 28.0.1500.95
  • Firefox 23.0

... unter 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>

Hat jemand einen Einblick, warum das nicht funktioniert?

10
David Byers

Probieren Sie einen carousel-inner mit mehreren items aus.

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

Demo: http://bootply.com/72622

5
Zim

Es gibt einen weiteren Fehler in diesem Code, der darin besteht, dass die Karussellindikatoren nicht anklickbar sind. Sie sollten Links sein, die Sie zum entsprechenden Panel führen.

Sie müssen dem Datenziel einen Hashtag hinzufügen:

<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

Dies soll jemandem helfen, der wie ich steckte, obwohl ich den Code richtig geschrieben habe. Ich habe versucht, einen Fehler im Code zu finden, aber alles war in Ordnung. Dann habe ich meine Javascript-Dateien überprüft und festgestellt, dass sich ihr Typ irgendwie in .js.txt geändert hat. Also habe ich es einfach in .js geändert und es hat funktioniert.

Viel Spaß beim Codieren!

0