光滑的轮播 - 重新加载页面时显示所有图像答案

【问题标题】：Slick carousel - when reloading a page all images are shown光滑的轮播 - 重新加载页面时显示所有图像
【发布时间】：2017-10-25 10:58:10
【问题描述】：

我正在尝试使用 Slick 轮播显示产品图片（主图片和缩略图 - https://d26dzxoao6i3hh.cloudfront.net/items/1A1K120k2o460k0P2d2P/Image%202017-10-25%20at%201.54.21%20PM.130n063B272P.png）。

但是当用户重新加载页面时 - 所有图像都显示为这样 - https://d26dzxoao6i3hh.cloudfront.net/items/3u1u0I1i21230a1u0w2e/Image%202017-10-25%20at%201.51.01%20PM.1X1M2p1S2D23.png。然后在页面加载后它看起来没问题。我的轮播 js 代码：

$('.product__image-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  adaptiveHeight: true,
  asNavFor: '.product-thumbnails',
  arrows: true,
  fade: true
});
$('.product-thumbnails').slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  asNavFor: '.product__image-for',
  arrows: false,
  dots: false,
  centerMode: true,
  focusOnSelect: true,
});

我应该限制容器 div 的高度吗？并使用溢出隐藏？或者也许是一些 Slick 设置。有人遇到过这个问题吗？

感谢您的帮助！

【问题讨论】：

标签： javascript jquery html css slick.js

【解决方案1】：

这是因为 slick 仅在页面加载后才被初始化（并应用其样式）。您需要创建额外的 CSS 样式以将光滑的滑块显示为未初始化状态，例如：

.product__image-for:not(.slick-initialized) .your-slide-selector {
  display none;
}
.product__image-for:not(.slick-initialized) .your-slide-selector:first-child {
  display block;
}

【讨论】：

【解决方案2】：

@flying 不知何故这对我不起作用。但我找到了另一种具有可见性和不透明度的解决方案。谢谢大家的帮助！

.product__image-for,
.product-thumbnails {
   visibility: hidden;
   opacity: 0;  
   transition: opacity 0.1s;
}

.product__image-for.slick-initialized,
.product-thumbnails.slick-initialized {
  visibility: visible;
  opacity: 1;
}

.product__image-for .product__image-item {
  display: none ;
}

.product__image-for .product__image-item:first-child {
  display: block; 
  visibility: hidden;
} 

.product__image-for.slick-initialized .product__image-item {
  display: block;
  visibility: visible!important;
}

【讨论】：