Question

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

<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);
});

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

Answer 1

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

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

在这种情况下，如果用户点击2（第2页），它将在项目编号5上调用slickGoTo，这是第2页的开头。

自定义点slick.js slickGoTo无法正常工作

1 个答案: