javascript - Slick Carousel 不会在初始页面加载时加载

Question

我正在使用 slick carousel使用 ES6 和 React.js 时，轮播在页面首次加载时似乎已损坏。

当我刷新时，一切就位。当旋转木马损坏时，我可以在 html 中看到，它缺少所有光滑的旋转木马类。每次重新加载时都有效。我不确定需要做什么。有什么想法吗？

我的轮播 javascript 是:

import $ from 'jquery';
import slick from 'slick-carousel'; 

const ImagesCarousel= {
  start() {
    $('.images-container').slick({
      dots: false,
      arrows: false,
      slidesToShow: 1.5,
      slidesToScroll: 2,
      autoplay: false,
      swipe: true,
      autoplaySpeed: 3000,
      infinite: false,
      mobileFirst: true,

      responsive: [
        {
          breakpoint: 768,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 1,
            dots: false,
            arrows: true,
          }
        }
        ]
    });
  }
};

export default ImagesCarousel;

我将其导入到我的主要组件中，然后启动轮播:

componentDidUpdate() {
   ProductImagesCarousel.start();
  }

而 html 是:

<div className="images">
              {
                this.props.imageUrl.map((url, index) => {
                  return <img src={url} key={index} />
                })
              }
</div>

imageUrl 是从 props 中的对象中提取的:

const productData = {
  productCode: "abc",
  imageUrl: [
    "./img/test1.jpg",
    "./img/test2.jpg",
    "./img/test3.jpg"
  ],
  name: "Test Product"
}

Answer 1

看来问题出在 html 标记上。我的图像没有包含在 div 中。我没有在文档中的任何地方看到这一点，但我只是将图像包装在 div 中，它开始工作了。下面是我的新标记:

{ this.state.images.map((url, index) => { 
return <div className="thumbnail"><img src={url} key={index} /></div> 
})
}