我在使用 Slick Slider 时遇到了一个非常奇怪的问题。
有时,在第一页加载时,幻灯片和轨道宽度被设置为 0。
我已经尝试了许多解决方案,包括:
- 设置超时然后调用slick
- 通过JS触发窗口大小调整事件
- 将所有光滑元素的最小高度设置为 1
- 将图像放入 div 容器中
我一生都无法弄清楚如何解决这个问题。任何帮助将不胜感激!
实例(任何产品页面) https://www.juice-society.com/products/activated-lemonade
jQuery
// Slick Slider on Product Page
$('.slick-carousel').slick({
slidesToShow: 1,
slidesToScroll: 1,
lazyLoad: 'ondemand',
arrows: false,
fade: true,
asNavFor: '.slick-thumbnails'
});
$('.slick-thumbnails').slick({
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.slick-carousel',
focusOnSelect: true,
arrows: false,
mobileFirst: true,
responsive: [{
breakpoint: 768,
settings: {
vertical: true
}
}]
});
HTML(引导程序 4)
<div class="col-12 col-md-10 col-lg-8 mx-auto order-1 order-md-2 slick-carousel">
<div>
<img class="img-fluid" src="{{ image.src | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}" onload="$(window).trigger('resize')"/>
</div>
</div>
CSS
.slick-thumbnail-container {
* {
min-height:0;
}
flex-direction: row;
padding: 2rem 0;
.icon {
font-size: 1.25rem;
color: $gray-light;
}
}
.slick-thumbnails {
* {
min-height:0;
}
.slick-slide {
margin: 0 12px;
}
.slick-list {
margin: 0 -12px;
}
}
@include media-breakpoint-up(md) {
.product-description-container {
padding: 2rem;
border-radius: $border-radius;
margin: 3rem auto 4rem;
.add-to-cart {
width: auto;
}
}
.slick-thumbnail-container {
* {
min-height:0;
}
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.slick-thumbnails {
* {
min-height:0;
}
.slick-slide {
margin: 12px 0;
}
.slick-list {
margin: -12px 0;
}
}
.slick-carousel {
* {
min-height:0;
}
display: flex;
align-items: center;
padding: 1rem 0 4rem;
justify-content: center;
width: 100%;
max-height: 100%;
}
}