Использование гибкой коробки с Slick-carousel, width = 0 и первый слайд скрыт

Question

При первой загрузке пятно-карусели при использовании гибких боксов ширина слайда и слайка установлены на 0, скрывает первый слайд, пока он не запускает следующий слайд. Если есть только один слайд, он скрыт и никогда не будет отображаться, если окно не будет изменено вручную.

Answer 1

Сначала оберните карусель с контейнером:

.myContainer { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width:100%; 
 
}

<div class="myContainer"> 
 
    <div class="myCarousel" (click)="navigate()"></div> 
 
</div>

Далее, убедитесь, что это иметь мин-высота & мин-ширина устанавливается в 0 для .slick- слайдер.

CSS: нота изменяется от значения по умолчанию пятна-карусельных стилей прокомментированы

// 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; 
 
}

Наконец, убедитесь, что вы определили реагирующие настройки при инициализации ваш слайдер:

// 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 
 
       } 
 
      } 
 
     ] 
 
    }); 
 
}