slick 플러그인 연결 https://bagun-coding.tistory.com/entry/JavaScript-slick-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EC%97%B0%EA%B2%B0%ED%95%98%EB%8A%94-%EB%B2%95 [JavaScript] slick 플러그인 연결하는 법 slick이란 slick은 웹 사이트에서 반응형을 구현하는 jQuery의 플러그인 입니다. 웹 페이지의 이미지 슬라이드에 많이 활용됩니다. https://kenwheeler.github.io/slick/ slick - the last carousel you'll ever need slick is bagun-coding.tistory.com html 구조 ( slick 버튼은 a태..
slick 옵션 autoplay : true : 자동재생 autoplaySpeed : 5000 : 자동재생 속도 5초 speed : 1000 : 재생 속도 1초 slidesToShow : 3 : 화면에 한 번에 3개를 보여줌 slidesToScroll : 3 : 슬라이드 넘길때 3개씩 넘어감 centerMode : true : 캐러셀 센터 모드 vertical : true : 세로방향 슬라이드 arrows : false : 버튼 없애기 variableWidth: true : 너비값 다양하게 주기 (안하면 각 이미지 너비값 동일함) ( slick 버튼 영역에는 a태그 사용금지 악먹히게 만들어놨음)
offset() 명령 $('셀렉터').offset() : 셀렉터로 선택 한 요소의 위치를 반환 box2클래스의 위치값을 변수에 넣어 로그로 확인할 수 있습니다. ( f12-console ) scrollTop() & scrollLeft() 명령 $('셀렉터').scrollTop() : 스크롤바의 세로위치를 저장 $('셀렉터').scrollLeft() : 스크롤바의 가로위치를 저장 스크롤을 내리면 변하는 위치값을 콘솔에서 확인 가능 활용예시 브라우저의 스크롤을 200px 밑으로 내리면(if) box2의 배경색이 pink로 바뀌고 그렇지 않으면(else) lightgray 색으로 바뀜
jQuery Top버튼 만들기 : 브라우저 스크롤을 맨 위로 올리는 버튼 버튼 형태를 만들어줍니다. $('셀렉트').click() : 셀렉트를 클릭하면 발생하는 이벤트 $('html, body').stop().animate({scrollTop : 0}) : html과 body 태그의 스크롤 위치값을 0으로 만드는 애니메이션 Bottom 버튼
