부트 스트랩 슬라이더가 컨테이너에서 작동하지 않습니다.

Question

부트 스트랩 슬라이더가 있습니다. 컨테이너 외부에 배치하면 잘 작동하지만, 작동하지 않는 컨테이너에 배치하면 제발 도와주세요, 여기 내 컨테이너가 있습니다. 코드 :

<div class="container"> 

<div class="row"> 
<div class="col-md-12" 
    <!-- Full Page Image Background Carousel Header --> 
    <header id="myCarousel" class="carousel slide"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
      <li data-target="#myCarousel" data-slide-to="1"></li> 
      <li data-target="#myCarousel" data-slide-to="2"></li> 
     </ol> 

     <!-- Wrapper for Slides --> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <!-- Set the first background image using inline CSS below. --> 
       <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div> 
       <div class="carousel-caption"> 
        <h2>Caption 1</h2> 
       </div> 
      </div> 
      <div class="item"> 
       <!-- Set the second background image using inline CSS below. --> 
       <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div> 
       <div class="carousel-caption"> 
        <h2>Caption 2</h2> 
       </div> 
      </div> 
      <div class="item"> 
       <!-- Set the third background image using inline CSS below. --> 
       <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div> 
       <div class="carousel-caption"> 
        <h2>Caption 3</h2> 
       </div> 
      </div> 
     </div> 

     <!-- Controls --> 
     <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
      <span class="icon-prev"></span> 
     </a> 
     <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
      <span class="icon-next"></span> 
     </a> 

    </header> 
    </div> 
</div> 
</div> 
<!-- jQuery --> 
    <script src="js/jquery.js"></script> 

    <!-- Bootstrap Core JavaScript --> 
    <script src="js/bootstrap.min.js"></script> 

    <!-- Script to Activate the Carousel --> 
    <script> 
    $('.#myCarousel').carousel({ 
     interval: 4000 
    }) 

</script> 

그러나 컨테이너, 행, col-md-12 div를 제거하면 문제가되지 않습니다. 내 코드에서 문제가 뭐야 ??

안부

Answer 1

코드에 몇 가지 오류가 있습니다 (아마도 SO로 복사 할 때만 가능). 3

스크립트로도

<div class="col-md-12"> 

당신이 라인에 > 누락, 당신은 : $('.#myCarousel').carousel({

는 당신이 찾고있는 id를 점을 제거 -이 있어야한다 $('#myCarousel').carousel({

마지막으로 div를 <img> 태그로 변경하십시오.

예 : <img src="http://placehold.it/1900x1080&text=Slide One" alt="">

실제 작업 예 : https://jsfiddle.net/cw9s99o9/1/

Answer 2

구문이 잘못 우리는

올바른 코드가

$('#myCarousel').carousel({ 
     interval: 4000 
}) 

라인없이 세에서

당신이 닫지 DIV 끝을했던 것입니다. (#) 함께 ID 또는 클래스 선택기를 사용할 수 없습니다 (>) 쓰기와 같은

<div class="col-md-12">