sayayin
sayayin

Reputation: 1041

Slick Carousel does not load on initial page load

I am using slick carousel with ES6 and React.js and the carousel seems broken when the page first loads.

When I refresh everything falls into place. I can see in html when the carousel is broken, it is missing all slick carousel classes. Works every time when I reload. I'm not sure what needs to be done. Any ideas?

My javascript for carousel is:

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;

I am importing this in my main component and then starting the carousle as:

componentDidUpdate() {
   ProductImagesCarousel.start();
  }

and html is:

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

imageUrl is pulled from object in props:

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

Upvotes: 2

Views: 3486

Answers (1)

sayayin
sayayin

Reputation: 1041

So seems like the issue was with the html markup. My images were not enclosed in divs. I don't see this being called out anywhere in the documentation, but I just wrapped the images in divs and it started working. Below is my new markup:

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

Upvotes: 3

Related Questions