初始页面加载时平滑滑块宽度0 [英] Slick Slider Width 0 On Initial Page Load
问题描述
我在使用Slick Slider时遇到了一个非常奇怪的问题.
I'm running into a really weird issue with a Slick Slider.
有时候,在第一页加载时,幻灯片和轨道的宽度就被设置为0.
Sometimes, on the very first page load the slide and track width are being set to 0.
我已经尝试了许多解决方案,包括:
I've tried many of the solutions out there including:
- 设置超时时间,然后调用"slick"
- 通过JS触发窗口调整大小事件
- 将所有光滑元素的最小高度设置为1
- 将图像放入div容器
我一生都无法解决该问题.任何帮助将不胜感激!
I can't for the life of me figure out how to fix this issue. Any help would be greatly appreciated!
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%;
}
}
推荐答案
您是否尝试过在光滑页面上运行这些命令之一
Have you tried to run one of these commands on the slick
$('.slider-class').slick('setPosition').slick();
或
$('.slider-class').slick('destroy').slick();
或
$('.slider-class').slick('unslick').slick();
或
$('.slider-class').slick('unslick').slick('reinit').slick();
或
$('.slider-class').on('init', function(event, slick){
console.log("initialised")
$('.slider-class').slick()
});
或检查slick-initialized
类是否在滑块上,然后调用$('.slider-class').slick()
or maybe checking if the slick-initialized
class is on the slider and then calling $('.slider-class').slick()
希望您能找到解决方案. :)
I hope you find your solution. :)
这篇关于初始页面加载时平滑滑块宽度0的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!