在页面加载时滑动滑块slickGoTo

Question

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

我试过这个stack，没有

如果有办法，我宁愿不使用光滑的init方法

jsfiddle example

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

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