使用带有Slick-carousel的flex-box，width = 0＆amp;隐藏第一张幻灯片

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> 

接下来，确保最小高度＆amp; .slick-slider的min-width设置为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
                }
            }
        ]
   });
}