光滑的滑块图像在加载

时间:2018-01-02 21:24:53

标签: javascript jquery css slick.js

我的光滑滑块没有显示加载时的第一张完整幻灯片。通过单击框标题打开内容div后,第一张幻灯片被切断,只显示其中约1/3。单击“下一步”按钮一次或两次后,它会自行更正。

我猜这与我的jQuery函数有关,它显示/隐藏内容div ...但我无法弄清楚发生了什么。

任何帮助?

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

1 个答案:

答案 0 :(得分:2)

尝试给你的.slick-track一个浮动。

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

检查pen