Ślizgacz karuzeli Bootstrap nie działa

Question

Próbuję zaimplementować wtyczkę karuzeli na Twitterze Bootstrap. Wygląda i cyklicznie działa poprawnie, ale efekt slajdów między elementami nie działa. Po prostu statycznie zastępuje jeden element następnym. Choć jest funkcjonalny, jest to niezbyt przyjemny UX. Myśli?

<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

Spróbuj tego:

Usuń wszystkie poniższe skrypty js zostały załadowane w dokumencie:

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

I po prostu zachować następujące w tej samej kolejności (jQuery idzie pierwszy)

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

problemem jest to, że wierzę, oprócz ładowania sam skrypt wiele plików razem s (plik bootstrap js zawiera już wszystkie wtyczki, więc nie ma potrzeby dołączania wersji min (zapisz ją do teraz) lub pojedynczych oddzielnych plików skryptów), nie ładujesz skryptu przejścia zawartego wewnątrz pliku bootstrap.js złożyć powodu aby skrypty wkładanego.

Answer 2

Deal jest, jeśli używam class="carousel" do pojemnika karuzeli i

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

to działa tylko na jeden lewy \ prawy przycisk myszy i pracuje prawie w porządku (ale tylko raz).

Jeśli użycie class="carousel slide" i

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

następnie karuzela przełączania ale bez efektu animacji slajdów.

Answer 3

Po zmaga się z tym na chwilę znalazłem solution - wystarczy włączyć

bootstrap-transition.js

i animacje slajdów będzie działać.

Answer 4

kod jest poprawny .. W moim systemie ten kod działa poprawnie ..

nie ma definicję klasy „slide” w Bootstrap 3..But bez klasy „Slide”, karuzela obrazów zmieni się z jakiegokolwiek efektu animacji ..

Dodaj ten skrypt w was kodu

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

sprawdź bootstrap CSS & JS kod referencyjny w was .. a także sprawdzić kolejność odniesienia f iles

Możesz śledzić ten rozkaz: -

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

Blok skrypt nie będzie działać z zewnątrz JQ Library..So dodać JQ Biblioteka złożyć poprawnie ..

i upewnić się, że plik JQ załadowany przed skrypt działa .. W tym celu możesz dodać odniesienie na górze strony

Answer 5

Mimo, że odpowiedź na to pytanie została przyjęta pomyślnie - przyjechałem tutaj, szukając odpowiedzi na podobny problem.

Mój pierwszy przedmiot w karuzeli przesuwał się w lewo, jak zwykle, ale drugi przedmiot nie był za nim. Gdy pierwszy element zniknie z ekranu, pojawi się drugi element, a nie slajd. Następnie zniknie, a pierwszy element zostanie odpowiednio wsunięty.

Jeśli masz ten problem, sprawdź, czy nie masz pozycji: względna; na div .item.

I dodał, że tak:

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

Okazuje się, że bałagan rzeczy. Usuwanie pozycji: względna; naprawiono problem. Teraz przesuwanie jest płynne i prawidłowe.