Slick Carousel在初始頁面加載時無法加載

我使用的是帶有ES6和React.js的slick carousel，並且在頁面第一次加載時輪播似乎中斷。Slick Carousel在初始頁面加載時無法加載

當我刷新一切到位。當旋轉木馬被破壞時，我可以在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;

我進口這在我的主要成分，然後開始carousle爲：

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

來源

2016-07-19 sayayin

代碼請..代碼... –

作爲第一級，支持者會說......「有我們知道的沒有一般錯誤，請告訴我們，正是你」已經完成了。「正好意味着：向我們展示您的代碼，並告訴我們您到目前爲止所做的努力是如何解決問題的。 – Dominik

整個代碼太長，我已經更新了與旋轉木馬相關的代碼的關鍵部分我的問題。 – sayayin

所以看起來問題是與HTML標記。我的圖片沒有被div封入。我沒有看到這在文檔中的任何地方被調用，但我只是用div封裝了圖像，並開始工作。下面是我的新的標記：

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

來源

2016-07-29 15:08:48 sayayin

這讓我瘋狂！感謝您的表面處理 – PJATX

Slick Carousel在初始頁面加載時無法加載

回答

相關問題