我的光滑滑块没有显示加载时的第一张完整幻灯片。通过单击框标题打开内容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
});
答案 0 :(得分:2)
尝试给你的.slick-track一个浮动。
.slick-track {
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
float: left;
}
检查pen。