728x90 반응형 javascript/jQuery30 [JAVASCRIPT/JQUERY]이미지슬라이드 플러그인 slick 옵션 설정하는 법(사용법) 일단 가장먼저 필요한건 slick의 기본 css 와 js 파일이 필요하고, 또한 jquery 파일도 필요하다. 옵션값 설정하는 방법 $("#slick").slick({ infinite: true , /* 맨끝이미지에서 끝나지 않고 다시 맨앞으로 이동 */ slidesToShow: 1, /* 화면에 보여질 이미지 갯수*/ slidesToScroll: 1, /* 스크롤시 이동할 이미지 갯수 */ autoplay: true, /* 자동으로 다음이미지 보여주기 */ arrows: true, /* 화살표 */ dots:true, /* 아래점 */ autoplaySpeed:10000,/* 다음이미지로 넘어갈 시간 */ speed:1000 , /* 다음이미지로 넘겨질때 걸리는 시간 */ pauseOnHover:tru.. 2019. 4. 8. [JAVASCRIPT/JQUERY]반응형 탭메뉴 (웹에서는 탭메뉴 - 모바일에서는 셀렉트메뉴) 탭메뉴를 반응형으로 구현하는 방법 중 하나입니다. 화면이 작아지는 모바일에서 탭메뉴는 한줄로 표현하기 어려워 집니다. jQuery 를 이용해 탭메뉴를 선택했을때 셀렉트 메뉴 선택 option 도 달라지도록 설정해 큰화면으로 보다가 화면이 줄어들어 탭메뉴에서 select 로 변경되어도 선택한 메뉴가 유지되도록 합니다. 모바일에서는 select 형태로 보이고 웹에서는 tab 메뉴 형태로 보입니다. See the Pen 반응형 탭메뉴 by gahyun (@gahyun) on CodePen. 또다른 반응형방법 [CSS/CSS 응용] - [CSS]한줄로 길게 늘어트리기 (가로로 스크롤 되도록) 2019. 4. 8. [JAVASCRIPT/JQUERY]애니메이션 - 숫자가 0부터 점점 커지는 롤링애니메이션 숫자가 0 부터 롤링되어 키지면서 지정한 숫자가 되도록 하는 애니메이션이다 . memberCountConTxt 에 숫자를 지정해 준다. duration 으로 숫자가 커지는 시간을 지정해주고 숫자에 , 를 추가해주는 함수 (3자리마다 , 추가) function numberWithCommas(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } See the Pen 제이쿼리_숫자_애니메이션_카운트 by gahyun (@gahyun) on CodePen. 2019. 4. 8. [JAVASCRIPT/JQUERY]이미지 리스트 반응형으로 구현할 때 참고 웹에서는 탭메뉴로 리스트를 보여주고 모바일에서는 가로 스크롤로 각 탭의 리스트를 볼 수 있도록 구현 모바일에서는 탭메뉴가 순서대로 보이고 가로스크롤로 각각 탭메뉴에 해당하는 리스트가 보여지도록 한다. 웹에서는 탭메뉴로 세로스크롤로 리스트가 보여지고 각각의 탭을 선택하면 해당 탭메뉴에 해당하는 리스트가 보여진다. See the Pen 반응형 리스트 탭메뉴 by gahyun (@gahyun) on CodePen. 2019. 4. 8. 이전 1 ··· 4 5 6 7 8 다음 728x90 반응형
