Slick Carousel不會在初始頁面加載時加載

Question

我在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是從道具中的對象拉出的：

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> 
})
}