自定义点 slick.js slickGoTo 不起作用答案

【问题标题】：custom dots slick.js slickGoTo not working自定义点 slick.js slickGoTo 不起作用
【发布时间】：2017-06-09 03:42:32
【问题描述】：

我尝试使用光滑的 js 制作轮播并制作自定义点。（我制作了这个自定义点，因为我需要这些点在轮播 div 之外，所以告诉我使用“dots: true”参数是没有用的）。这是小提琴

http://jsfiddle.net/sjkdpcjo/49/

<div class="paging-group">
  <ul>
    <li data-page="1">
      <button>1</button>
    </li>
    <li data-page="2">
      <button>2</button>
    </li>
    <li data-page="3">
      <button>3</button>
    </li>
  </ul>
</div>

<section class="main-carousel">
  <div class="carousel">
    <div class="carousel-item">1</div>
    <div class="carousel-item">2</div>
    <div class="carousel-item">3</div>
    <div class="carousel-item">4</div>
    <div class="carousel-item">5</div>
    <div class="carousel-item">6</div>
    <div class="carousel-item">7</div>
    <div class="carousel-item">8</div>
    <div class="carousel-item">9</div>
    <div class="carousel-item">10</div>
    <div class="carousel-item">11</div>
    <div class="carousel-item">12</div>
    <div class="carousel-item">13</div>
    <div class="carousel-item">14</div>
    <div class="carousel-item">15</div>
    <div class="carousel-item">16</div>
  </div>
</section>

javascript 代码

carousel.slick({
  dots: true,
  slidesToShow: 4,
  slidesToScroll: 4,
  arrows: false,
  infinite: false,
  dots: false,
});

$( '.paging-group ul li' ).click( function() {
    var page = $( this ).data( 'page' );
    console.log( page );
    carousel.slick('slickGoTo', page);
});

这很奇怪，因为它不会转到除第一页之外的其他页面（尝试滑动/滑动到除第一页之外的任何页面，然后单击点）。

【问题讨论】：

标签： javascript jquery slick.js

【解决方案1】：

slickToGo 函数要求项目编号作为参数，不是页码。它总是到第一页的原因是因为所有项目（1、2 和 3）都在第一页上。您可以按如下方式更改代码，假设每页始终正好有 4 个项目：

carousel.slick('slickGoTo', (page - 1) * 4 + 1);

在这种情况下，如果用户单击 2（对于第 2 页），它将在第 5 项上调用 slickGoTo，即第 2 页的开头。

【讨论】：