Question

我正在尝试在文档准备就绪时滚动到特定幻灯片，但我只能在单击按钮时执行此操作。有些想法？

我试过stack而没有

如果有方法

，我宁愿不使用光滑的init方法

HTML

<div id="slide">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>
<button>
go to 4th
</button>

JS jquery and slick

$(document).ready(function(){
   $('#slide').slick({
      arrows: false,
      dots: false,
      variableWidth: true,
      slidesToShow: 2,
      infinite: false,
      swipeToSlide: true
   });

  //$(document).ready(function(){
  //    $('#slide').slickGoTo(3);
  //});
  $('button').on('click', function(){
    $('#slide').slick('slickGoTo', 3, false);
  });
  $('#slide').on('init', function(event, slick){
    $('#slide').slick('slickGoTo', 3, false);
  });
});

CSS

#slide{
  width: 300px;
  margin-bottom: 15px;
}
.item{
  background-color: blue;
  color: #fff;
  font-family: sans-serif;
  font-weight: bold;
  border-radius: 5px;
  padding: 25px 50px;
  margin: 0 5px;
}

Answer 1

为了解决这个问题，我在上次编辑的项目中添加了一个类，在Javascript中我将它添加到第一个项目

var $lastEdited = $(".slide-form .last-edited");
$lastEdited.closest('.slide-form').prepend($lastEdited);

知道在初始化幻灯片的代码之前需要设置此代码，或者您需要销毁幻灯片并再次初始化它，这是非常重要的

Answer 2

首先，将“滑动”选项的速度更改为0。其次，编写代码。

 $('#slide').slick('slickGoTo', 3);

第三，更改原始速度值。

$("#slide").slick('slickSetOption', {
   speed : 400
});

在页面加载时滑动滑块slickGoTo

2 个答案: