[slick] 로딩 시 전체 이미지 보이는 에러

html

<div class="wrap">
	<div class="con">
    	<a href="#n" target="_blank"><img src="test-img1.jpg"  alt = "" /></a>
    </div>
   	<div class="con">
        <a href="#n" target="_blank"><img src="test-img2.png"  alt = "" /></a>
    </div>
</div>

 

css

.wrap:not(.slick-initialized) .con:not(:first-child){display: none;}

.wrap{opacity: 0;visibility: hidden;-webkit-transition: opacity .1s ease;transition: opacity .1s ease;}
.wrap.slick-initialized{opacity: 1;visibility: visible;}

 

 

참고

https://koreanmenopause.or.kr/

https://hoyashu.tistory.com/111

https://stackoverflow.com/questions/28357617/slick-js-hide-slider-until-images-have-loaded