찐망고'S 퍼블리싱그리고디자인

안녕하세요 찐망고입니다오늘은 tab과 swiper슬라이드를 연결할 건데요.예전 jQuery때랑 코드 부분이 조금 달라져서 포스팅해 봅니다.  1. Tab과 슬라이더를 연결2. Tab클릭 시 슬라이더가 첫 시작위치로 로드 되어야 함3. Tab클릭시 슬라이더는 모두 loop처리되어야 함 이 세 가지 조건에 맞는 슬라이더를 구현해 보도록 합니다. Tab부분은 기본적인 리스트 형태로 마크업을 할 거고요.리스트 하나는 ALL버튼입니다.처음 로드 되었을 때와 ALL버튼을 누르면 전체 swiper-slide가 다 보이게 할 거예요. 아래는 html코드입니다. ALL EYE LIP BASE OTHERS  플러그인은 swiper를 이용하여 따로 ..

안녕하세요 찐망고입니다. 이번 포스팅에서는 자바스크립트의 getAttribute() 메서드와 HTML5의 data- 속성을 활용하여,마우스 이벤트에 반응하는 탭 구조를 만드는 방법을 소개하겠습니다. 아래 그림을 볼까요? 오른쪽 탭에 마우스를 올릴 때마다 왼쪽의 이미지가 바뀌는데요.HTML5의 data속성과 자바스크립트의 getAttribute() 메서드를 이용한 코드를 포스팅해볼까 해요 일단 getAttribute()는 JavaScript에서 사용되는 메서드로, HTML 요소의 속성(attribute)을 가져올 때 사용되는데요. 예를 들어, HTML 태그에 id, class, href 같은 속성이 있을 때, 해당 속성의 값을 가져오는 데 유용합니다.element.getAttribute(attributeN..