Owlカルーセルnon existant

Iveは、私のjsファイルでコードを再編成したり、スクリプトや他の多くのもので再編成する方法を試しましたが、残念ながらまだ動作していません。もう何をすべきかわからない。Owlカルーセルnon existant

<!DOCTYPE html> 
<html lang="en"> < 
head><title> Audi Home</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 


<!-- Bootstrap --> 
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"> 
<link rel="stylesheet" type="text/css" href="fonts/font-awesome/css/font-awesome.css"> 


<!-- Slider 
    ================================================== --> 
<link href="css/owl.carousel.css" rel="stylesheet" media="screen"> 
<link href="css/owl.theme.css" rel="stylesheet" media="screen"> 

<!-- Stylesheet 
    ================================================== --> 
<link rel="stylesheet" type="text/css" href="css/mystyle.css"> 
<link rel="stylesheet" type="text/css" href="css/animate.min.css"> 
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,300' rel='stylesheet' type='text/css'> 
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,600,300' rel='stylesheet' type='text/css'> 
<script tyupe="text/javascript" src="js/custom.js"></script> 
<script type="text/javascript" src="owl-carousel/owl.carousel.min.js"></script> 
</head> 
<body> 

<!-- Loader --> 


<!-- Navigation 
    ==============================--> 
<nav id="menu" class="navbar navbar-default navbar-fixed-top"> 
    <img src="img/audi-logo3.jpg" class="img-responsive pull-right" style="margin- right: 15px"> 
    <div clas="collapse navbar-collapse"> 
     <div class="nav-container"> 
      <div class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav navbar-left" style="margin-top: 10px;"> 
        <li><a href="#" class="page-scroll">Home</a></li> 
        <li><a href="#" class="page-scroll"> Models</a></li> 
        <li><a href="#" class="page-scroll">Owners & Customers</a> </li> 
        <li><a href="#" class="page-scroll">Shopping Tools</a></li> 
        <li><a href="#" class="page-scroll">Global Inovation</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
</div> 
</nav> 
<section style="margin-top: 85px;"> 
     <div class="owl-carousel"> 
     <div> 
      <img src="img/audi-r8.jpg"> 
     </div> 
     <div> 
      <img src="img/audi-s8.jpg"> 
     </div> 
    </div> 



</section> 





<!-- Script --> 
<script type="text/javascript" src="owl-carousel/owl.carousel.js"></script> 
<script type="text/javascript" src="js/custom.js"></script>

私のJS

(function(){ 

    $(document).ready(function(){ 
      $('.owl-carousel').owlCarousel({ 
      loop:true, 
      margin:10, 
      nav:true, 
      responsive:{ 
       0:{ 
        items:1 
      }, 
       600:{ 
        items:3 
       }, 
       1000:{ 
        items:5 
       } 
      } 
     }) 
    }); 
    })

出典

2016-04-18 Jordan Custodio

彼らはあなたのbodyタグの一番下に既にあるとして、headセクションからscriptタグを削除します。

問題は、そこで使用した順序に起因します。独自のコードでライブラリを使用する必要がある場合は、まずそのライブラリを宣言する必要があります。あなたのheadセクションではそうではありませんでした。 bodyセクションの下部にあるものであればOKです。

また、jQuery用のscriptタグは表示されませんが、使用しています。ただ、</body>前

：

<!-- This script is hosted on a CDN, but you could host it too --> 
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
<script type="text/javascript" src="owl-carousel/owl.carousel.js"></script> 
<script type="text/javascript" src="js/custom.js"></script>

出典

2016-04-18 22:48:56 blex

まず、私はあなたがで同じ2つのスクリプトをスクリプトロードされていることがわかり、また

<!-- Stylesheet 
================================================== --> 
     <link rel="stylesheet" type="text/css" href="css/mystyle.css"> 
     <link rel="stylesheet" type="text/css" href="css/animate.min.css"> 
     <link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,300' rel='stylesheet' type='text/css'> 
     <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,600,300' rel='stylesheet' type='text/css'> 
THIS ONE --> <script **tyupe**="text/javascript" src="js/custom.js"></script> 
     <script type="text/javascript" src="owl-carousel/owl.carousel.min.js"></script> 
     </head>

タイプミスに気づいたあなたは最初にすることをインクルードする必要がありあなたのHTMLの一番下にありますが、縮小版ではありません。使用されていないものを削除し、そのタイプミスを修正する必要があります。

HTMLを検証してファイルをチェックする場合は、誤植を見つけるでしょう。他の単純なエラーがあるかもしれないので、実行する価値があるかもしれません。

jQueryファイルをロードする必要がありますか？あなたのjavascriptファイルの前にロードされていることを確認してください

出典

2016-04-18 22:55:07 BrainHappy

答えて

関連する問題