javascript - 页面加载时滑动 slider slickGoTo

Question

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

我试过这个 stack什么都没有

如果有办法，我宁愿不使用 slick 的 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);

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