光滑的JS滑块不起作用

时间:2015-10-02 18:26:51

标签: jquery carousel slick.js

我已经针对这个问题梳理了所有文章,但我无法找到解决方案。

我没有得到任何工作。这是代码:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Slick</title>

    <link rel="stylesheet" type="text/css" href="bower_components/slick-carousel/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="bower_components/slick-carousel/slick/slick-theme.css" />

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

    <style>
        body {
            background: #333; 
            margin: 0; 
        }
        div {
            outline: none;
        }
        #container {
            width: 600px;
            height: 250px; 
            background: transparent url(media/bg-headline.jpg) no-repeat center center; 
            position: relative;

        }
        #cta {
            position: absolute;
            right: 0; 
            bottom:0; 
            padding: 10px; 
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="center">
            <div><h1>1</h1><div>
            <div><h1>2</h1><div>
            <div><h1>3</h1><div>
        </div>
        <div id="cta"><a href="#"><img src="media/12254-cta.png" alt="Learn More >" width="100"></a></div>
    </div>


    <script type="text/javascript" src="bower_components/slick-carousel/slick/slick.min.js"></script>
    <!--<script src="js/12254.js"></script>-->






    <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>
</html>

JS

// Slick Version: Center Mode
$('.center').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});

数字以垂直线显示。根本没有旋转木马。我已经尝试了几个版本的slick.jsslick.min.js甚至不同版本的jQuery的链接,但无济于事。

我在俯瞰什么?

0 个答案:

没有答案