La diapositiva a scorrimento di bootstrap su Twitter non funziona

Question

Sto cercando di implementare il plug-in di avvio di Twitter Bootstrap. Sembra e funziona automaticamente in modo corretto, ma l'effetto di scorrimento tra gli elementi non funziona. Semplicemente sostituisce staticamente un elemento con il successivo. Mentre è funzionale, questa è una UX non proprio piacevole. Pensieri?

<div class="span7"> 
     <div id="myCarousel" class="carousel slide"> 
      <div class="carousel-inner"> 
      <div class="item active"> 
       <img src="img/CoachellaValley.png" alt=""> 
       <div class="carousel-caption"> 
       <h4>Sponsor 1</h4> 
       </div> 
      </div> 
      <div class="item"> 
       <img src="img/CoachellaValley2.png" alt=""> 
       <div class="carousel-caption"> 
       <h4>Sponsor 2</h4> 
       </div> 
      </div> 
      <div class="item"> 
       <img src="img/CoachellaValley3.png" alt=""> 
       <div class="carousel-caption"> 
       <h4>Sponsor 3</h4> 
       </div> 
      </div> 
      </div> 
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
      <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a> 
     </div> 
     </div> 
[...] 
<script src="js/bootstrap.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/jquery-1.7.2.min.js"></script> 
<script src="js/bootstrap-collapse.js"></script> 
<script src="js/bootstrap-carousel.js"></script> 
<script type="text/javascript"> 
    $(function(){ 
    $('#myCarousel').carousel(); 
    }) 
    </script> 

Answer 1

Prova questo:

Rimuovere tutti i seguenti script js aver caricato nel documento:

<script src="js/bootstrap.min.js"></script> 
<script src="js/bootstrap-collapse.js"></script> 
<script src="js/bootstrap-carousel.js"></script> 

e tenere solo il seguente nello stesso ordine (jQuery va in primo luogo)

<script src="js/jquery-1.7.2.min.js"></script> 
<script src="js/bootstrap.js"></script> 

Il problema credo sia quello, oltre a caricare più volte gli stessi file di script s (il file jst di bootstrap ha già tutti i plug-in inclusi, quindi non è necessario includere la versione minima (salvala per la produzione per ora) o i singoli file di script separati, non stai caricando lo script di transizione incluso all'interno di bootstrap.js il file a causa dell'ordine che gli script stanno caricando in.

Answer 2

Deal è se sto usando class="carousel" per il contenitore giostra e

$('.carousel').carousel('slide',{interval:1000}); 

funziona solo per una sinistra \ tasto destro del mouse e funziona più o meno bene (ma solo per una volta).

Se uso class="carousel slide" e

$('.carousel .slide').carousel('slide',{interval:1000}); 

commutazione quindi giostra ma senza effetto animazione diapositive.

Answer 3

Dopo aver lottato con questo per un po 'ho trovato un solution - è sufficiente includere

bootstrap-transition.js

e l'animazione diapositive funzionerà.

Answer 4

Il vostro codice è corretto .. Nel mio sistema di questo codice che lavora bene ..

Non esiste una definizione per la classe "slide" in Bootstrap 3..But senza classe "Slide", immagini carosello cambierà con qualsiasi effetto di animazione ..

Aggiungi questo script in voi codice

<script> 
    $(document).ready(function() { 
     $('.carousel').carousel(); 
    }); 
</script> 

Controllare il Bootstrap CSS & JS riferimento in voi codice .. e controllare anche l'ordine del riferimento f ILES

Puoi seguire questo ordine: -

1. bootstrap.css
2. bootstrap-theme.css
3. jquery-1.9.1.js
4. bootstrap.js

Il blocco di script non funziona con fuori JQ Library..So Aggiungi file correttamente JQ Biblioteca ..

e assicurarsi che il file JQ caricato prima che lo script di lavoro .. Per questo è possibile aggiungere il riferimento nella parte superiore della pagina

Answer 5

Anche se questa domanda ha avuto esito positivo, sono venuto qui cercando una risposta a un problema simile.

Il mio primo elemento nella giostra scorreva a sinistra, come normale, ma il secondo elemento non era dietro. Una volta che il primo elemento era fuori dallo schermo, il secondo elemento appariva e non scendeva. Quindi spariva e il primo elemento scorreva correttamente.

Se si verifica questo problema, verificare di non essere in posizione: relativo; sul .item div.

Ho aggiunto che in questo modo:

.carousel-inner > .item { 
    position:relative; 
    height:495px; 
} 

scopre che scombina le cose. Rimozione posizione: relativa; risolto il problema. Ora lo scorrimento è scorrevole e corretto.