퍼블리싱 전문 제작

$('.slider-wrap').on('wheel', function(e) { e.preventDefault(); if (e.originalEvent.deltaY

transform-origin은 CSS transform 속성과 함께 사용되는 속성으로서, 회전 중심(원점·기준점)을 지정합니다. rotate(), skew() 등의 회전, 변형 속성을 사용하기 전에 기준점을 지정해 둡니다. 초기 값은 50% 50%으로 요소의 중심점이 됩니다. transform-origin의 속성 값은 백분율(%)과 키워드 중 하나로 지정할 수 있습니다.

jQuery //웹페이상 현재 스크롤의 위치 $(window).scrollTop(); //화면의 높이 $(window).height(); //백분율 구하기 $(window).height() / $('body').height() * 100 JavaScript //웹페이지상 현재 스크롤 위치 window.pageYOffset; //화면의 높이 window.innerHeight();

defer를 넣지 않을 경우 script가 html이 준비되기 이전에 실행이 된다.

Element.getBoundingClientRect() 메서드는 엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공하는 DomRect 객체를 반환합니다.

$('.slider').slick('setPosition'); // 탭 페이지 안에서 slick 사용시 – slick이 첫페이지에 있지 않으면 slick의 첫번째 이미지가 보이지 않고 2번째 부터 도는것을 확인 할 수 있다. 해당 문제는 탭이 active가 된 후 그 페이지에 slick이 있다면 = slick의 위치를 수동으로 새로 고쳐줘야 한다.

script src="https://code.jquery.com/jquery-3.5.1.min.js">script>

$('').slick({ slidesToShow: 3, dots: true, arrows: false, slidesToScroll: 3, responsive: [ // 반응형 웹 구현 옵션 { breakpoint: 768, //화면 사이즈 768px settings: { //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경 slidesToShow:1, slidesToScroll: 1 } } ] });