フレックスボックスをスリックカルーセルで使用すると、幅= 0と最初のスライドは隠されます

Question

フレックスボックスを使用して滑車カルーセルを最初にロードすると、滑りスライドと滑りトラックの幅は0に設定されます次のスライドをトリガするまで、最初のスライドを非表示にします。スライドが1つしかない場合は、非表示になり、ウィンドウのサイズを手動で変更しない限り表示されません。

Answer 1

第一の容器を使用して、カルーセルをラップ：必ず、

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

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

次は.slick- 0に設定分の高さ&分幅を持つことですスライダー。

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