AOS animation과 slick slider 사용시 스크롤 오류 해결

퍼블리싱시에 스크롤 애니메이션으로 자주쓰는 aos 애니메이션.

같은 페이지에 slick slider를 입히려고 보니, 스크롤 위치를 제대로 인식하지 못하는 문제가 발생하였다.

 

해결법은 정말 간단했다.

slick slider의 함수로드 가장 아래에 코드 한줄만 추가하면 모든 문제가 해결된다.

 

추가 코드

AOS.refresh();

 

적용 예시

<script type="text/javascript">
	 $(document).on('ready', function() {
      $(".regular").slick({
        dots: false,
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3,
        autoplay: true,
  		autoplaySpeed: 3000,
      }),
		  AOS.refresh();
    });
</script>

 

참고 : https://stackoverflow.com/questions/51768579/how-to-make-aos-not-working-with-slick-slider