플랙시 블 상자를 슬릭 회전 목마와 함께 사용하면 너비 = 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>

다음, 확인하는 것은 & 분 - 폭이 .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 
 
       } 
 
      } 
 
     ] 
 
    }); 
 
}