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在初始页面加载时无法加载

回答

相关问题