AOS:in 이후 slick 첫번째 순서부터 동작

aos와 slick을 사용하다보면

 

aos가 동작하기 전 slick이 먼저 돌아가서 aos동작이후 중간 부분이나 끝부분부터 보여질 때가 있다.

이럴 때 aos가 동작한 다음 slick이 처음 slide부터 보여질 수 있도록 하는 꼼수(?)가 있다.

 

이렇게되면 aos가 in 된다음에 slider의 index기준 0번째 slide로 이동한다.

 

<div data-aos-id="container" data-aos="fade-up">
	<ul id="slider">
     	<li>item01</li>
     	<li>item02</li>
     	<li>item03</li>
	</ul>
</div>

<script>
    $(document).ready(function() {
    	$('#slider').slick({
        	slideToShow: 1,
            slideToScroll: 1,
            autoplay: true,
            ...
        });
        
        document.addEventListener('aos:in:container', () => {
        	$('#slider').slick('goTo', 0); // 0 == 1st slide index
        });
        
    	AOS.init(); // AOS
    });
</script>