我無法獲得基本的滑動輪播工作？

我只是試圖讓一個簡單的輪播工作，但頁面只顯示我沒有任何輪播的圖片。我該如何解決？我從下面的「入門」指南：http://kenwheeler.github.io/slick/我無法獲得基本的滑動輪播工作？

<html> 
    <head> 
    <title>My Now Amazing Webpage</title> 
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/> 
    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> 
    </head> 
    <body> 

    <div class="your-class"> 
    <div><img src="images/image1.png"></div> 
    <div><img src="images/image2.png"></div> 
    <div><img src="images/image3.png"></div> 
    <div><img src="images/image4.png"></div> 
    <div><img src="images/image5.png"></div> 
    <div><img src="images/image13.png"></div> 
    <div><img src="images/image6.png"></div> 
    <div><img src="images/image21.png"></div> 
    <div><img src="images/image3.png"></div> 
    <div><img src="images/image9.png"></div> 
    <div><img src="images/image12.png"></div> 
    <div><img src="images/image13.png"></div> 
    </div> 

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
    <script type="text/javascript" src="slick/slick.min.js"></script> 

    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.your-class').slick({ 
     setting-name: setting-value 
     }); 
    }); 
    $('.variable-width').slick({ 
      dots: true, 
      infinite: true, 
      speed: 300, 
      slidesToShow: 1, 
      centerMode: true, 
      variableWidth: true 
    }); 
    $('.autoplay').slick({ 
      slidesToShow: 3, 
      slidesToScroll: 1, 
      autoplay: true, 
      autoplaySpeed: 2000, 
    }); 
    </script> 

    </body> 
</html>

來源

2016-01-26 user3796320

似乎並沒有得以順利。我已經有''$（document）.ready（function（）{（'。your-class'）。slick（{設置名稱：設置值 }）;「'我也需要創建我自己的.js文件？我的根目錄下只有slick文件夾，圖片文件夾和這個.html文件 – user3796320

'setting-name：setting-value'是語法的一個例子，如果刪除那一行，它可能會工作，使用默認設置。 –

你不是真正初始化div。 setting-name : setting-value是僞代碼，表示名稱和值需要替換。

一個正確初始化的一個例子是：

$(document).ready(function(){ 
    $('.your-class').slick({ 
     dots: true, 
     infinite: true, 
     speed: 300, 
     slidesToShow: 1, 
     centerMode: true, 
     variableWidth: true 
    }); 
});

Working Fiddle

來源

2016-01-26 21:02:39 Yass

我無法獲得基本的滑動輪播工作？

回答

相關問題