본문 바로가기

jQuery54

제이쿼리 슬라이더 위치변경 / 초기화 상태에서 만들기 스와이퍼에서 Add Swiper HTML Layout html 복붙 https://swiperjs.com/get-started 지금 신상 지금 바로 입고된 따끈따끈한 신상품 과자 이번 주 핫 신상 보러가기 Slide 1 Slide 2 Slide 3 2022. 10. 25.
제이쿼리 swiper 슬라이더 응용 100% 디자인에서 텍스트 목록과 슬라이더가 bar 와 함께 나올수 있도록 적용해보자 1. swiper 에서 원하는 디자인 찾기 2. get started 에서 html layout 태그 복붙 (예외없음) 3. 본인에 맞는 디자인으로 태그 수정 를 꼭 container 추가 지정할 이름 추가 더보기 KT VIP 고객 생일달해피버스데이 도넛+아메리카노 FREE! 매주 금요일 글레이즈드팩6개입 6,900원, 12개입 12,900원! LGU+ 멤버십 행사추석 맞이 5천원 금액권 증정 T멤버십 VIP/GOLD 15%할인 적립SILVER 5% 할인/적립! KT VIP 고객 생일달해피버스데이 도넛+아메리카노 FREE! 매주 금요일 글레이즈드팩6개입 6,900원, 12개입 12,900원! LGU+ 멤버십 행사추석 맞.. 2022. 10. 24.
제이쿼리 scroll/animate 헤더가 마우스 스크롤을 하면 이렇게 gnd 색이 변할수 있도록 제이쿼리를 설정해보자 $(function () { // scroll 이벤트는 스크롤시 아주 많이 발생하므로 최적화를 신경써야함 // 선택하여 변수에 대입하면 탐색은 한번만 $(window).on('scroll', function () { var st = $(this).scrollTop(); console.log(st); if (st > 0) { $('#header').addClass('on'); } else { $('#header').removeClass('on'); } }); }); 최적화후 $(function () { // scroll 이벤트는 스크롤시 아주 많이 발생하므로 최적화를 신경써야함 // 선택하여 변수에 대입하면 탐색은 한번만 .. 2022. 10. 24.
제이쿼리 슬라이더 페이지 네이션 커스텀 (swiper) 페이지 네비게이션 커스텀 해보자 Pagination custom 먼저 html. css로 자리 잡아놓기 더보기 /* 일시정지 버튼 */ .main_slider2_wrap .btn_wrap { position: absolute; left: 0; bottom: 100px; width: 295px; height: 89px; background: url(../images/main_label.png) no-repeat; z-index: 100; text-align: center; padding-top: 40px; } .main_slider2_wrap .btn_wrap .btn_arrow { width: 24px; height: 34px; border: 1px solid black; display: inline-b.. 2022. 10. 20.
제이쿼리 swiper 슬라이더 스와이프 이미지 커스텀 스와이프 이미지로 변경 해보자 기본 제공 기능 없음 html 에 버튼 태그추가해주기 /* 메인슬라이더 일시정지 버튼 */ .main_slider_wrap .btn_pause { border: 1px solid red; position: absolute; left: 50%; bottom: 40px; z-index: 100; margin-left: 420px; width: 37px; height: 37px; border-radius: 50%; text-indent: -9999px; background: #fff; } .main_slider_wrap .btn_pause:before { content: ''; position: absolute; left: 50%; top: 50%; transform: trans.. 2022. 10. 20.
제이쿼리 슬라이더 용어정리 + 화살표 커스텀 기존코드 화살표 네비게이션 커스텀해주기 기존 코드에 이미 버튼이 들어가있지만 우리스타일로 바꾸기 위해 공통 클래스를 지정해준다. 슬라이더 단추 이미지 하나로 양쪽 바꿔서 사용해주기 기존 코드 확인후 위치 조절 이미 margin-top 에 -22px 적용되어있으므로 중앙 배치를 위해 배너높이 확인후 margin-top:-31px; 적용 반대쪽 슬라이더 버튼 뒤집어서 사용해주기 .main_slider_wrap .swiper-button-next { left: auto; right: 30px; transform: rotateZ(180deg); } 기존코드에 left 가 걸려있기때문에 right 가 적용안됨 이땐 left 를 auto 로 초기화해준다. (left는 aoto가 기본값) 페이지네이션 수정해주기 페이.. 2022. 10. 20.
제이쿼리 swiper 슬라이더 정렬 overflow 슬라이더 이미지를 포지션으로 정렬공식으로 띄워 가운데 배치하자 .main_slider_wrap .swiper-slide a { position: absolute; left: 50%; top: 0; transform: translateX(-50%); } 그럼 부모의 높이가 사라지기 때문에 창에서 보이지 않는다. 높이를 잡아 보자 .main_slider_wrap .main_slider { height: 440px; border: 3px solid red; } 높이적용시 이미지가 넘쳐 흐름 오버플로우 히든으로 적용 해 주어야한다. swiper 가져올때 css 기존코드에 이미 position: relative; 가 적용되어있음을 확인 .main_slider_wrap .swiper-slide { overflow:.. 2022. 10. 20.
제이쿼리 swiper 슬라이더 오류 해결 swiper.min.js.map 404 swiper 오류 해결 swiper.min.js.map 404 swiper.min.js 파일 맨 밑에 //더 추가후 저장하면 prettier 가 적용되어 줄이다 내려감으로 prettier 에서 파일 제외를 먼저 해준다. 그 다음 // 추가후 저장 ////# sourceMappingURL=swiper.min.js.map 2022. 10. 20.
제이쿼리 swiper 슬라이더 셋팅 적용 슬라이더 제작방식 자체제작: 일반적인 경우가 아니므로 분석시간이 소요됨(최소 5일), 레퍼런스가 있어야함 라이브러리 활용 종류 slick 가장 먼저 개발됐으며 익스하위버전 호환됨 swiper 커스텀 옵션이 매우많음, 모바일특화 swiper4 * swiper4버전 사용해야함, 5버전이상에서 ie호환안됨 bxslider 하코사(하드코딩을사랑하는사람들) 게시물에 누군가 답을 달아주는 바람에 사용자가 조금 생김 주의 라이브러리 사용시 실 사이트에서 많이보이는 것을 사용해야함 js라이브러리는 cdn방식(링크연결방식)은 주소가 변경될 수 있기 때문에 사용X, 파일을 직접 연결! 다운로드 파일중 min 붙은 js 파일. css 파일을 작업중 폴더에 복붙 - github -> swiper4 브랜치로 이동 -> dist.. 2022. 10. 20.
제이쿼리 github 사이트 슬라이더 소스 보기 전세계 개발자들의 코드 관리 사이트 https://github.com/ GitHub: Where the world builds software GitHub is where over 83 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat... github.com swiper 검색 swiper 의 모든 소스가 다있다. https://github.com/nolimits4web/swiper GitHub - nolimits4web/swiper: Most m.. 2022. 10. 20.
05_효과메서드,jQueryUI확장라이브러리,헤더전체메뉴 [효과메서드] addClass(),removeClass(),toggleClass(),hasClass() slideUp(),slideDown(),slideToggle() fadeIn(),fadeOut(),fadeToggle() show(),hide(),toggle() animate() - jQuery UI 확장라이브러리 사용시 easing옵션 변경가능 stop() ​ 주력사용 addClass() 제일중요 ​ 클래스 추가 addClass(), 클래스 지우기 removeClass(), 이벤트 안에서 왔다갔다 toggleClass(), hasClass() 언제사용하나? 이렇게 같은 사이트에서 스크롤을 내릴시 헤더의 색이 은은하게 변경된다. 예제 연습하기 #header { background: #ddd; tran.. 2022. 10. 20.
04_이벤트바인팅,이벤트객체, 이벤트전파 제이쿼리 이벤트란 ? 어떤동작이 발생되는것을 의미 예 ) 팝업띄우기, 마우스 버튼 누르기, 윈도우 사이즈 작아지기 스크롤바 움직이기 등 이벤트가 발생했을때 작동하는 실행문을 연결하는 것을 이벤트핸들러 라고한다 보통 이벤트 이름에 'on'을 연결해여 사용 만약 click 이벤트가 발생되었다면 onclick 이벤트핸들러가 작동하여 작업을 실행 작성법 $(function () { $('.선택자') .이벤트핸들러('이벤트명', function () {실행문} }); }); 예제 scroll 이벤트 (페이지 바닥감지) 스크롤 이벤트는 무엇인가? 우리가 브라우저 창에서 스크롤을 내리면 팝업창이 뜨거나 새로운 정보들이 뜰때가 있다. 이런 효과를 제이쿼리 window 객체인 scroll 이벤트로 쓰이며 반드시 trig.. 2022. 10. 20.

티스토리툴바