Using flex-box with Slick-carousel, width = 0 & first slide is hidden - width

Question

When first loading the slick-carousel while using flex-boxes, the width of the slick-slide and the slick-track are set to 0 which hides the first slide until it triggers the next slide. If there is only one slide, it's hidden and will never show unless the window is manually resized.

Answer 1

First wrap your carousel with a container:
.myContainer {
position: fixed;
top: 0;
left: 0;
height: 100%;
width:100%;
}
<div class="myContainer">
<div class="myCarousel" (click)="navigate()"></div>
</div>
Next, be sure is to have min-height & min-width set to 0 for the .slick-slider.
CSS:
note the changes from the default slick-carousel styles are commented
// new definition
.slick-slider {
min-height: 1px;
min-width: 1px;
}
.slick-slide {
float: left;
[dir="rtl"] {
float: right;
}
img {
display: block;
}
&.slick-loading img {
display: none;
}
display: none;
&.dragging img {
pointer-events: none;
}
.slick-initialized {
display: block;
// set height and width
height: 100%; // helps to fix the loading issue when using flex-box - stretches slide vertically
width: 100% !important; // helps to fix the loading issue when using flex-box - shows slide upon load
}
.slick-loading {
visibility: hidden;
}
.slick-vertical {
display: block;
height: auto;
border: 1px solid transparent;
}
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
// set height
width: 100% !important; // helps to fix the loading issue when using flex-box
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
.slick-loading {
visibility: hidden;
}
}
.slick-initialized {
display: block;
// set height and width
height: 100%; // helps to fix the loading issue when using flex-box - stretches slide vertically
width: 100% !important; // helps to fix the loading issue when using flex-box - shows slide upon load
}
.slick-loading {
visibility: hidden;
}
.slick-vertical {
display: block;
height: auto;
border: 1px solid transparent;
}
Finally, make sure you have defined the responsive setting when initializing your slick-slider:
// initialize carousel
private initializeCarouselSettings(){
this.carousel.slick({
accessibility: false,
autoplay: false,
arrows: false,
slidesToShow: 1,
pauseOnHover: false,
pauseOnFocus: false,
draggable: false,
swipe: false,
touchMove: false,
centerMode: true,
fade: this.isTransitionTypeFade(),
autoplaySpeed: this.getSlideInterval(),
speed: this.getSpeedValue(),
responsive: [ // fixes the loading issue when using flex-box
{
breakpoint: 1024,
settings: {
mobileFirst: false,
infinite: true,
speed: this.getSpeedValue(),
slidesToShow: 1,
centerMode: true,
variableWidth: false,
focusOnSelect: false
}
}
]
});
}