Question

我正在尝试将光滑的旋转木马纳入我的网站，但我在最基本的级别（我是一个完整的新手与js）上遇到了很多麻烦。我的目标是将3个旋转木马堆叠在一起，每个旋转木马一次显示一个图像。

这是JS小提琴：http://jsfiddle.net/dpL2Y/1/embedded/result/

以下是我的代码：

提前致谢

<html>
<head>
<meta Charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/Anderson.css">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>

</head>
<body>
<nav>
    <ul>
        <li><a href="fmf.html">Fantastic Mr Fox</a></li>
        <li>The Life Aquatic</li>
        <li>Home</li>
        <li>The Grand Budapest Hotel</li>
        <li>Moonrise Kingdom</li>
    </ul>
</nav>

<div class="top">

<div><img src="imgs/lifehead.png"></div>
<div><img src="imgs/moonhead.png"></div>
<div><img src="imgs/foxhead.png"></div>
<div><img src="imgs/budahead.png"></div>
</div>
</div>

<div id="torso"></div>
<div id="legs"></div>

<footer></footer>

 <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//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(){
        $('.top').slick({
            setting-name: setting-value
        });
    });
</script>

</body>

Answer 1

setting-name: setting-value只是额外的，您需要将其删除。

这只是创作者提出的一个例子。你应该这样做：

$(document).ready(function(){
    $('.top').slick({
        dots: true,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        slidesToScroll: 1
    });
});

Answer 2

我知道线程已经很老了，但是我也在努力学习光滑。

首先在你的html中有很多错误（两个关闭的body标签，一个不属于的关闭div标签，..）

这是一个干净且几乎正常工作的代码。光滑的工作（您可以使用鼠标滑动div）。然而，Slick控制元素似乎不会呈现（这就是我总是挂起的地方）。

http://jsfiddle.net/dpL2Y/8/

<body>
<nav>
    <ul>
        <li><a href="fmf.html">Fantastic Mr Fox</a></li>
        <li>The Life Aquatic</li>
        <li>Home</li>
        <li>The Grand Budapest Hotel</li>
        <li>Moonrise Kingdom</li>
    </ul>
</nav>
<div class="top">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
</div>
</body>

JS：

$(document).ready(function () {
$('.top').slick({
    infinite: true,
    slidesToShow: 3,
        slidesToScroll: 1
});
});

我使用外部资源（左侧）添加了css，jquery和slick文件。

假设你已经放弃或修复了这个问题，也许这有助于其他人获得光滑的工作。

Answer 3

您显示的示例是本地引用不可用的css和js。为了使其正常工作，您需要将/ slick文件夹放在根目录中。解决此问题的一个好方法是打开开发人员控制台以确保加载所需的资源。

Answer 4

您需要在//code.jquery.com前面添加http：... （http://code.jquery.com...）

光滑的旋转木马合并不起作用

4 个答案: