2017-06-03 36 views
1

新來JS和JQuery和有一個問題變得光滑加載自舉Jumbotron。有4個背景圖像與.carousel以下div的內部,但他們只是按順序加載,我在鉻檢查中得到一個錯誤,聲稱光滑的CDN是錯誤的,即使它是從網站直接複製。請讓我知道,如果你有任何建議!JQuery光滑輪播不加載,CDN加載錯誤

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="./resource/reset.css"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
     integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/> 
     <link rel="stylesheet" type="text/css" href="./resource/style.css"> 
     <link href="https://fonts.googleapis.com/css?family=Monoton|Open+Sans:400,600,700" rel="stylesheet"> 
     <link rel="icon" type="image/gif" href="./resource/favicon.png"> 
     <title>Jumpstart</title> 
    </head> 
<body> 
    <!--Navigation Menu--> 
    <nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Explore</a></li> 
       <li><a href="#">Start a Project</a></li> 
       <li><a href="#">About Us</a></li> 
      </ul> 
     <img class="navbar-brand navbar-right collapse 
     navbar-collapse visible-lg visible-md" src="./resource/images/logo.png" alt="Brand"> 
     </div> 
    </nav> 
    <!--Website Header with Scrolling Images--> 
    <div class="carousel"> 
     <div class="jumbotron background jumbotron-bike"> 
      <div class="container-fluid"> 
       <h1>Get Going.</h1> 
       <p>Jumpstart your startup with some crowdsourced seed money, or support one of our 300,000,000+ creators and get rewards.</p> 
      </div> 
     </div> 
     <div class="jumbotron background jumbotron-beer"> 
      <div class="container-fluid"> 
       <h1>GET THINKING.</h1> 
       <p>Meet like-minded individuals who will help fuel your creative juices.</p> 
      </div> 
     </div> 
     <div class="jumbotron background jumbotron-flowers"> 
      <div class="container-fluid"> 
       <h1>GET CREATING.</h1> 
       <p>Stop overthinking projects and begin putting them out into the world.</p> 
      </div> 
     </div> 
     <div class="jumbotron background jumbotron-duffel"> 
      <div class="container-fluid"> 
       <h1>GET STARTED.</h1> 
       <p>What are you waiting for? Today's the day for your next big idea.</p> 
      </div> 
     </div> 
    </div> 
    <div class="relative-wrapper"> 
       <a href="#" class="btn btn-primary btn-lg">Jump In</a> 
    </div> 
    <!--Featured Project--> 
    <div class="container featured-project"> 
     <div class="row"> 
      <h2 class="col-xs-12">Featured Project</h2> 
     </div> 
     <div class="row"> 
      <div class="col-xs-12 col-md-6"> 
       <div class="image-container"> 
        <a href="#"> 
         <img src="./resource/images/featured-project.png" alt="Featured Project" class="thumbnail"> 
        </a> 
       </div> 
      </div> 
      <div class="col-xs-6 col-md-3"> 
       <h3>Defrost: A Documentary</h3> 
       <p>by Leo De Firenze</p> 
       <p>"DeFrost is a documentary about growing up in a little red house in a cold, harsh valley. 
       This is a story about my mother's childhood. This film attempts to capture vignettes of her upbringing â€」 her family, 
       friends, pets, and eventual depature from a freezing valley in Northern Italy â€」 through beautiful cinematography and narration." 
       </p> 
      </div> 
      <div class="col-xs-6 col-md-3 "> 
       <h3>Product Categories</h3> 
       <ul> 
        <li>Art</li> 
        <li>Books</li> 
        <li>Crystals</li> 
        <li>Design</li> 
        <li>Doodles</li> 
        <li>Deedlybobs</li> 
        <li>Farming</li> 
        <li>Gadgets</li> 
        <li>Hoverboards</li> 
        <li>Jams, Jellies, Etc.</li> 
        <li>Magazines</li> 
        <li>Plants</li> 
        <li>Snakes &amp; Snake Equipment</li> 
        <li>Tables</li> 
        <li>Ventriliquist Figures</li> 
        <li>Yoyos</li> 
       </ul> 
      </div> 
     </div> 
    </div> 
<!--Projects List--> 
    <div class="container"> 
     <div class="row"> 
      <h2 class="col-xs-12">Projects</h2> 
     </div> 
     <div class="row"> 
      <div class="col-xs-12 col-sm-4 project"> 
       <div class="image-container"> 
        <a href="#"> 
         <img src="./resource/images/project1.png" alt="Proj1" class="thumbnail"> 
        </a> 
       </div> 
       <h3>The Right Tights</h3> 
       <p>by Riley Mae</p> 
       <p>These tights are 50 denier, beautifully constructed, 
        hand-dyed, and guaranteed to last (no more ladders!). Made with high quality, 
        completely toxic-free materials. Custom colors available to all backers. 
       </p> 
      </div> 
      <div class="col-xs-12 col-sm-4 project"> 
       <div class="image-container"> 
        <a href="#"> 
         <img src="./resource/images/project2.png" alt="Proj2" class="thumbnail"> 
        </a> 
       </div> 
       <h3>Peppermint Smart Home</h3> 
       <p>by Brian McDonald</p> 
       <p>Instantly upgrade your home with technology that keeps your family and home safe. 
        We've made Peppermint easy to use. Just talk to your phone and Peppermint will help you every step of the way. 
       </p> 
      </div> 
      <div class="col-xs-12 col-sm-4 project"> 
       <div class="image-container"> 
        <a href="#"> 
         <img src="./resource/images/project3.png" alt="Proj3" class="thumbnail"> 
        </a> 
       </div> 
       <h3>American Streetlife</h3> 
       <p>by Patrick Wallace</p> 
       <p>I've been traveling around the United States for the past two years. I've slept on hundreds of couches, 
        more than a few benches, and captured my experiences in this 120 page photo album. 
       </p> 
      </div> 
     </div> 
    </div> 
<!--Having Trouble Section--> 
    <div class="container-fluid help"> 
     <strong>Having Trouble thinking of an idea?</strong> 
     <p>Inventors’ block strikes at the worst times. But that’s 
      all changed with Jumpstart’s Good Idea Generator Lite (GIGLi).</p> 
     <a href="#" class="btn btn-primary">Learn More</a> 
    </div> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" 
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="crossorigin="anonymous"></script> 
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> 
    <script type="text/javascript" src="./resource/main.js"></script> 
</body> 
</html>' 

這裏是jQuery代碼:`$(文件)。就緒(函數(){

$('.carousel').slick({ 
     autoplay: true, 
     autoplaySpeed: 4000, 
     arrows: false, 
     fade: true, 
     pauseOnFocus: false, 
     pauseOnHover: false, 
     // slidesToShow: 1, 
     slidesToScroll: 4 
    }); 

    var scrol = 0; 


});` 

它也是在一個Git倉庫上市,看它住在這裏:https://github.com/solaini/Jumpstart

回答

0

您的代碼看起來不錯清除緩存& Cookie,並嘗試重新加載頁面。如果你還有問題,請嘗試更換:。

  • //cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js與。 /resource/slick.min.js
  • //cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css./resource/slick.css

Your code works good on my browser: see this.