2014-09-23 11 views
5

Ich habe versucht, eine einfache Implementierung des Slick Carousel arbeiten zu bekommen.Slick Carousel funktioniert nicht

Ich habe die Anweisungen auf der Git Seite eintragen: https://github.com/kenwheeler/slick

Hier ist mein Code. Kann jemand ein Problem sehen? Hat jemand einen einfachen Arbeitscode für Slick?

<html> 
    <head> 
    <title>My Now Amazing Webpage</title> 
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.7/slick.css"/> 
    </head> 
    <body style="background-color: lightblue"> 

    <div class="your-class"> 
     <div><p>test1</p></div> 
     <div><p>test2</p></div> 
     <div><p>test3</p></div> 
    </div> 

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.7/slick.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $('.your-class').slick(); 
     }); 
    </script> 

    </body> 
</html> 

Antwort

6

Der Grund, warum es nicht funktioniert, ist, weil Sie Ihre HTML-Datei aus Datei ausführen. Dies bedeutet, dass das URL-Schema für Ihre Skript Links verwendet wird, ist

file: 

statt

http: 

so CDN Links als

file://code.jquery.com/jquery-1.11.0.min.js 

aufgelöst werden, die eindeutig falsch ist.

Entweder fest verdrahten die Regelung zu http: durch alle Links zu aktualisieren, ein Schema zu enthalten:

<link rel="stylesheet" type="text/css" 
    href="http://cdn.jsdelivr.net/jquery.slick/1.3.7/slick.css"/> 

oder den Code von einem HTTP-Kontext ausführen, anstatt aus einer Datei auf Ihrem HD.

+0

Vielen Dank! Funktioniert nach dem Wechsel zu http: – Steve