Question

我正在使用https://github.com/kenwheeler/slick作为我网站的轮播。我已经按照教程去了T，一切都是（据我所知）它的意义。这是代码

$(document).ready(function(){
  $('.slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav'
    });
  $(".slider-nav").slick({
    slidesToShow: 3,
    slidesToScroll, 1,
    asNavFor: '.slider',
    dots: true,
    focusOnSelect, true
    });
  });

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <!--Semantic import-->
  <script src="assets/semantic/semantic.min.js"></script>
  <link href="assets/semantic/semantic.min.css" rel="stylesheet" />

  <!-- Slick -->
  <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
  <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>
  <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
  <!--Font-->
  <link href="https://fonts.googleapis.com/css?family=Exo+2|Ubuntu" rel="stylesheet">
  <!-- Javascript -->
  <script src="js/root.js"></script>
  <script src="js/gamesdev.js"></script>

</head>
<body>
  <div class="pusher">
    <div id="page">
      <div class="ui container">
        <div class="slider">
          <div><h3>1</h3></div>
          <div><h3>2</h3></div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
        </div>
        <div class="slider-nav">
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

我已经删除了所有不必要的代码，但这是结果

http://i.imgur.com/3M26NFd.png

我不知道出了什么问题，我已经梳理了一个小时，也许两个。

Answer 1

由于语法错误，它可能无法正常工作。你有一个逗号而不是冒号

将slidesToScroll, 1,更改为slidesToScroll: 1,

将focusOnSelect, true更改为focusOnSelect: true

光滑的轮播没有显示/工作

1 个答案: