javascript - 光滑的 slider 图像在加载时未正确居中

Question

我的光滑 slider 在加载时没有显示完整的第一张幻灯片时遇到问题。通过单击框标题打开内容 div 后，第一张幻灯片被 chop ，仅显示其中的大约 1/3。单击一次或两次“下一步”按钮后，它会自行更正。

我猜这与我显示/隐藏内容 div 的 jQuery 函数有关...但我不知道发生了什么。

有什么帮助吗？

https://codepen.io/Finches/pen/jYwdKJ

// Show/hide content from clicking box title
$('.track-box-title').click(function() {

  //Get height of content
  var height = $(this).parent('.track-box').parent('.track-box-container').find('.track-content').height() + 250;

  //Convert height to string
  var heightStr = height.toString();

  //Toggle height and content box display
  if ($(this).parent('.track-box').parent('.track-box-container').height() == 200) {
      $(this).parent('.track-box').parent('.track-box-container').animate({height: heightStr});
      $(this).parent('.track-box').parent('.track-box-container').find('.track-content').show();
    }
    else if ($(this).parent('.track-box').parent('.track-box-container').height() == heightStr) {
      $(this).parent('.track-box').parent('.track-box-container').find('.track-content').hide();
      $(this).parent('.track-box').parent('.track-box-container').animate({height: "200px"});
    }

});

//Slick slider
$('.project-image-slider').slick({
  prevArrow: false
});

Answer 1

试着给你的 .slick-track 一个 float 。

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
    float: left;
}

检查 pen .