2016-04-18 16 views
0

Ich habe versucht eine Reihe von Möglichkeiten, meinen Code in meinen js-Dateien neu zu ordnen, durch Scripts und eine Reihe anderer Dinge, die ich hier gefunden habe, neu zu arrangieren, aber leider funktioniert es immer noch nicht. Ich habe keine Ahnung, was ich noch tun soll.Eulenkarussell nicht existent

<!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> 

Mein JS

(function(){ 

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

Antwort

0

Entfernen Sie die script Tags aus dem head Abschnitt, da sie bereits an der Unterseite Ihres body-Tags.

Das Problem wird durch die Reihenfolge verursacht, die Sie dort verwendeten. Wenn Sie eine Bibliothek in Ihrem eigenen Code verwenden müssen, müssen Sie diese Bibliothek zuerst deklarieren. Das war in Ihrem head Abschnitt nicht der Fall. Es sollte in Ordnung sein mit dem, was Sie am Ende Ihrer body Abschnitt haben.

Auch sehe ich keine script Tag für jQuery, aber Sie verwenden es. Sie müssen enthalten, dass zuerst:

Kurz vor </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> 
0

Zuerst habe ich

<!-- 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> 

auch einen Tippfehler bemerkt haben, ich sehe, dass Sie Skript Laden die gleichen 2-Skripte an die sind unten in Ihrem HTML, aber die nicht minimierten Versionen. Sie sollten löschen, was nicht verwendet wird, und diesen Tippfehler beheben.

Wenn Sie von HTML Ihre Dateien validieren/überprüfen würden, würden Sie diesen Tippfehler finden. Könnte es wert sein, da es andere einfache Fehler gibt.

Müssen Sie eine jQuery-Datei laden? Stellen Sie sicher, dass es vor Ihren Javascript-Dateien

geladen ist
Verwandte Themen