Bootstrap 3 Carousel non funzionerà. (Sì, ho caricato jQuery prima di Bootstrap)

Sto convertendo un'applicazione in Bootstrap 3. Ecco il codice della mia pagina di carosello di esempio, nella sua interezza. Sì, ho caricato jQuery prima che Bootstrap.js venga caricato. Per qualsiasi motivo, la giostra semplicemente non funzionerà. In particolare: i pulsanti precedente/successivo non funzionano e il carosello non scorre automaticamente alla diapositiva successiva.Bootstrap 3 Carousel non funzionerà. (Sì, ho caricato jQuery prima di Bootstrap)

testato contro:

Safari 6.0.5
Chrome 28.0.1500.95
Firefox 23,0

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

Qualcuno ha una panoramica sul motivo per cui questo non funziona?

fonte

2013-08-07 David Byers

La tua console ti segnala errori? –

Non sul caricamento della pagina ... e non quando faccio clic sui pulsanti precedente e successivo. Quando faccio clic sugli indicatori del carosello, ricevo "TypeError: 'null' non è un oggetto (che valuta 'e.data (" bs.carousel "). A')" su bootstrap.min.js, riga 6. –

Grazie per aver fatto questa domanda. Il problema che avevo non era il caricamento di jQuery ;-) – whitehat

Prova uno carousel-inner con più item c'è dentro ..

<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

fonte

2013-08-07 18:24:34 ZimSystem

Questo l'ha fatto. Grazie! –

C'è un altro errore in questo codice che è che gli indicatori giostra non sono cliccabili. Dovrebbero essere collegamenti che portano al pannello appropriato.

è necessario aggiungere un hashtag per il target dei dati:

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

fonte

2014-01-25 21:49:12

-1

Per il cursore per lavorare è necessario includere:

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

al fondo del documento (prima tag di chiusura del corpo)

fonte

2016-03-09 15:04:33 Dsp

Voto negativo per due motivi: 1. La domanda ha 2 anni. 2. Il bootstrap javascript è caricato sulla riga 15. –

Questo per aiutare qualcuno che è rimasto bloccato come me nonostante abbia scritto correttamente tutto il codice. Stavo cercando di trovare un errore nel codice ma tutto andava bene. Poi ho controllato i miei file javascript e ho notato che in qualche modo il loro tipo è cambiato in .js.txt. Così ho appena cambiato in .js e ha funzionato.

Felice codifica!

fonte

2016-07-12 17:59:58

Bootstrap 3 Carousel non funzionerà. (Sì, ho caricato jQuery prima di Bootstrap)

risposta

Problemi correlati