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;

我在我的主要组件中导入它，然后启动carousle：

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中并开始工作。以下是我的新标记：

tree = data.frame(
        node_id = 1:10,
        node_data = c("ggplot",4,6,8,0,1,0,1,0,1),
        parent_id = c(NA,1,1,1,2,2,3,3,6,6),
        visible = rep(T,10)
      )

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

1 个答案: