Twitter 부트 스트랩 캐 러셀 슬라이드가 작동하지 않습니다.

Question

Twitter 부트 스트랩 캐 러셀 플러그인을 구현하려고합니다. 올바르게 보이지만 자동으로 순환하지만 항목 간의 슬라이드 효과는 작동하지 않습니다. 그것은 단순히 정적으로 한 항목을 다음 항목으로 대체합니다. 그것이 기능적이지만, 이것은 만족스러운 UX가 아닙니다. 생각?

<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

이 시도 :

당신이 문서에로드 한 다음 모든 JS 스크립트 제거

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

을 그리고 바로 그 같은 순서로 다음과 같은 유지

(jQuery를 먼저 간다)

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

내가 믿는 문제는, 같은 스크립트 파일을 여러 번로드하는 것을 제외하고 s (부트 스트랩 js 파일에는 이미 포함 된 모든 플러그인이 있으므로 최소 버전 (현재는 프로덕션을 위해 저장) 또는 별도의 단일 스크립트 파일)을 포함 할 필요가 없으므로 bootstrap.js에 포함 된 전환 스크립트를로드하지 않습니다 내가 회전 목마 컨테이너 class="carousel" 및

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

를 사용하고 그것을 하나 \ 마우스 오른쪽 버튼으로 클릭을 떠나 거의 잘 작동에만 작동하는 경우

Answer 2

거래입니다. 때문에 스크립트가에로드되는 순서의 파일 (그러나 한 번만).

경우 사용할 class="carousel slide" 및

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

다음 회전식 스위칭하지만 슬라이드 애니메이션 효과없이

.

Answer 3

잠시 동안 고민 한 후 나는 solution을 발견 - 당신은

부트 스트랩 - transition.js

및 작동 슬라이드 애니메이션을 포함해야합니다.

Answer 4

코드가 정확 ... "슬라이드"클래스없이 부트 스트랩 3..But에서 클래스 "슬라이드"에 대한 정의가 없다

내 시스템 잘 작동이 코드에서 ..., 회전 목마 이미지로 변경됩니다 어떤 애니메이션 효과에서 ..

는 코드

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

확인하면 코드에서 부트 스트랩 CSS & JS 참조 .. 에이 스크립트를 추가하고 또한 참조 F의 순서를 확인

당신은이 순서를 따를 수 세틸 -

1. bootstrap.css
2. 부트 스트랩 - theme.css
3. JQuery와-1.9.1.JS
4. bootstrap.js

스크립트 블록 밖으로 JQ Library..So 작동하지 않습니다에 .. JQ 라이브러리 파일을 제대로

을 추가하고 JQ 파일이 스크립트가 작동하기 전에로드되었는지 확인합니다 .. 페이지 위쪽에 참조를 추가 할 수 있습니다.

Answer 5

이 질문에 대한 답이 성공적 이었지만 - 비슷한 문제에 대한 답을 찾아 왔습니다.

컨베이어의 첫 번째 항목은 평소와 같이 왼쪽으로 미끄러 져 있었지만 두 번째 항목은 뒤에있었습니다. 첫 번째 항목이 화면에서 사라지면 두 번째 항목은 슬라이드가 아닌 표시됩니다. 그러면 사라지고 첫 번째 항목이 제대로 슬라이드됩니다.

이 문제가 발생하는 경우 위치가 없는지 확인하십시오. .item div에.

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

이 밝혀 일을 망쳐 놨이 :

나는과 같이 덧붙였다. 위치 제거 : 상대적; 문제가 해결되었습니다. 이제 슬라이딩이 부드럽고 정확합니다.