光滑的滑块图像在加载时未正确居中

Question

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

我猜这与我的 jQuery 函数有关，shows/hides 内容 div...但我不知道发生了什么。

有什么帮助吗？

// 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 一个浮动。

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

检查pen。

光滑的滑块图像在加载时未正确居中

Slick slider image not centering correctly on load

javascript

css

jquery

slick.js