Reputation: 1041
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
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