캐 러셀이 작동하지 않습니다.

-1

캐 러셀을 실행하려고하는데 작동하지 않습니다. 나는 그것이 어디 잘못되었는지 모른다. 나는 navbar 섹션을 작동하게했다, 어떤 이유에서, 회전 목마가 전혀 나타나지 않는다. 탐색 표시 줄 위에 회전식 캐 러셀을 설치해야합니까, 아니면 지금 가지고있는 방식대로 괜찮습니까? 콘베어를 콘테이너 div 안에 넣어야합니까?캐 러셀이 작동하지 않습니다.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Paints &amp; Prints</title> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 

 
<body> 
 

 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#pp"> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
     <a class="navbar-brand" href="#">Paints &amp; Prints</a> 
 
     </div> 
 
     <div class="collapse navbar-collapse navbar-right" id="pp"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="#">Services</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
      <li class="dropdown"> 
 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
 
         Your Account 
 
         <span class="caret"></span> 
 
         </a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">Login</a></li> 
 
       <li><a href="#">Sign Up</a></li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 

 
    <header id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <!-- 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" role="list-box"> 
 
     <div class="item active"> 
 
     <div class="fill" style="background-image:url('img/slide1.jpg');"></div> 
 
     <div class="carousel-caption"> 
 
      <h2>Skilled Artists</h2> 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <div class="fill" style="background-image:url('img/slide2.jpg');"></div> 
 
     <div class="carousel-caption"> 
 
      <h2>Made with the Finest Paints</h2> 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <div class="fill" style="background-image:url('img/slide3.jpg');"></div> 
 
     <div class="carousel-caption"> 
 
      <h2>See us at Street Art Events</h2> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
     <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
    </a> 
 
    </header> 
 

 
    <div class="container"> 
 
    </div> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
</body> 
 

 
</html>

출처

2017-03-10 Frederick Alcantara

에게 도움이 될 수 있습니다 당신은 브라우저의 모든 콘솔 오류가 있습니까? –

회전식 키를 초기화하지 않았습니다. 감사. – user1544541

당신이 당신의 JS 파일에 회전 목마를 호출 않은 : 여기 코드는? $ ('. 회전 목마'). 회전 목마();

http://getbootstrap.com/javascript/#via-javascript-4

출처

2017-03-10 17:31:10

나는 그것을했다, 나는 달리는 것을 얻었다. 고마워, 많이 감사합니다. –

-1

확인이, 당신

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Paints &amp; Prints</title> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 

 
<body> 
 

 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#pp"> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
     <a class="navbar-brand" href="#">Paints &amp; Prints</a> 
 
     </div> 
 
     <div class="collapse navbar-collapse navbar-right" id="pp"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="#">Services</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
      <li class="dropdown"> 
 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
 
         Your Account 
 
         <span class="caret"></span> 
 
         </a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">Login</a></li> 
 
       <li><a href="#">Sign Up</a></li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 

 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <!-- 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" role="list-box"> 
 
     <div class="item active"> 
 
     <img src="" alt="s"></div> 
 
     <div class="carousel-caption"> 
 
     Skilled Artists 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <img src=""/> 
 
     <div class="carousel-caption"> 
 
      Made with the Finest Paints 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <img src=""/> 
 
     <div class="carousel-caption"> 
 
     See us at Street Art Events 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
     <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
    </a> 
 
    </div> 
 

 
    <div class="container"> 
 
    </div> 
 

 
    
 

 
</body> 
 

 
</html>

출처

2017-03-11 03:30:51 shanu

해결 됐어. 작동하도록 CSS 스 니펫 코드를 추가하는 걸 깜빡 했어. 그래도 고마워 –

캐 러셀이 작동하지 않습니다.

답변

관련 문제