반응형 IT/script_ex21 tab content slide reset, 탭메뉴 슬라이드 리셋 저번에 했었던 탭메뉴 컨텐트 영역에 슬릭 슬라이드를 추가하고, 새로운 탭을 클릭시 첫번째 슬라이드가 보이도록 리셋되게 하는 방법. See the Pen WNoaOgx by wao816 (@hy16) on CodePen. tab maenu content에 슬라이드가 들어갔을 경우 class="tab-content"는 position:absolute; 로 위치를 잡고 display:none 이 아닌, 선택하지 않은 tab content 는 z-index:-1 선택한 영역의 tab content는 z-index:1 로 보여지게 한다. $('.tab_slide').slick('slickGoTo', 0); 슬라이드 리스트 중 첫번째 슬라이드가 보이도록 하는스크립트 추가! 2021. 3. 9. 눈 내리는 효과 script javascript를 이용한 눈내리는 효과 html에 canvers태그가 사용되었음 See the Pen snow by wao816 (@hy16) on CodePen. 2021. 2. 10. tab content , tab menu, 탭 메뉴 만들기 상단 메뉴를 클릭하면 하단의 내용 content 부분이 보여지는 탭 메뉴입니다. 1. 간단하면서 기본적인 tab menu 만들기 See the Pen tab by wao816 (@hy16) on CodePen. 코드펜에서 탭메뉴 스크립트를 찾아보다가 data-link 를 이용해서 만든 스크립트도 있어서 참고용으로 추가해봤다. 참고한 사이트 주소 -> https://codepen.io/cssjockey/pen/jGzuK See the Pen tab menu by wao816 (@hy16) on CodePen. 3. 탭 스크립트 + 마우스 클릭,호버 이벤트를 응용하여 만들어본 예시입니다. See the Pen MWbyqNZ by wao816 (@hy16) on CodePen. 2021. 2. 7. [slick] slick 슬라이드 배경 scale 효과 See the Pen WNrYbqv by wao816 (@hy16) on CodePen. codepen 0.25사이즈로 결과값 확인해주세요! gnb 메뉴는 글씨를 영문/한글 둘다 써서 높이값을 이용하여 마우스 hover했을 때 transformtransform:translateY(-85px); 가 작동하며 아래에 있던 한글 gnb 메뉴 글씨가 보이게 한다. slick 슬라이드는 처음 background-size를 100% 으로 주고 .active 됐을 때 100% 로 설정하면 점점 줄어드는 효과가 생긴다. (html에서 script는 마지막 태그 하단에 작성하였습니다.) 2020. 7. 30. [slick] slick 슬라이드 (+progress bar) slick 슬라이드에서 slide-progress bar는 다음슬라이드로 넘어가기전까지 width:100%을 향해 간다. (위 움짤에서는 하단에 노란색으로 progress가 있는데 색조합을 잘못해서 잘안보인다ㅠ) var 변수로 sliderTimer 를 빼줘야하고, autoplaySpeed: sliderTimer 옵션을 따로 추가해야한다. 아침 식사 대응으로 구입했습니다. 아침에 식사 대용으로 구입하였습니다. 아침 식사 대응으로 구입했습니다. 아침에 식사 대용으로 구입하였습니다. 아침 식사 대응으로 구입했습니다. 아침에 식사 대용으로 구입하였습니다. 아침 식사 대응으로 구입했습니다. 아침에 식사 대용으로 구입하였습니다. 아침 식사 대응으로 구입했습니다. 아침에 식사 대용으로 구입하였습니다. 아침 식사 대응.. 2020. 7. 28. [slick] slick 슬라이드 (div border + border) 분명 bxslide에서는 잘됐던거 같은데 왜 slick으로 하려니까 안됐던건지 ㅠㅠ 이미지가 아닌 div에 border가 들어가고 하단에 버튼같은 역할을 하는 div에도 border가 들어가는데 이렇게 되니까 가운에 선이 큰 div와도 겹치고 하단 파란 버튼div와도 겹쳐서 해결방법을 엄청 고민했었다.. slick 옵션 autoplay -> 자동 슬라이드 (speed: 300 -> 슬라이드 돼는 빠르기를 지정하려면 추가하는 옵션) $(document).ready(function(){ $('.multiple-items').slick({ infinite: true, slidesToShow: 4, slidesToScroll: 1, arrows: false, autoplay: true }); }); 123 12.. 2020. 7. 26. [slick] slick 슬라이드 row html 구조 순서대로 이미지1 -> 이미지2 -> 이미지3 ->이미지4 > 이미지A -> 운동시설B -> 이미지C ->이미지D 입니다. 이미지로 넣었으면 중간에 구간 식별이 더 쉬었을텐데 이미지대신 배경 핑크색을 넣어서 중간 구별이 안가는것 같아 글씨를 추가했습니다. slick slide 옵션 rows : 2 -> 세로로 2줄 slidePerRow:3 -> slidesToScroll 과 같은 옵션인것 같다. ( slidesToShow: 3, -> 보여지는 슬라이드 갯수 slidesToScroll: 3 -> 스크롤 넘겼을때 넘어가는 슬라이드 갯수 ) arrows -> 이전/다음버튼 추가 dots -> 페이징 버튼 infinite -> 슬라이드 갯수에 상관없이 무한반복 $(document).ready(fu.. 2020. 7. 17. [slick] slick 슬라이드 - 기본(+이전,다음버튼) 이전다음 버튼은 slick 슬라이드에서 prevArrow , nextArroow 옵션을 추가하면 된다. $(document).ready(function(){ $('.responsive').slick({ dots: true, prevArrow: $('.prev'), nextArrow: $('.next'), infinite: false, speed: 300, slidesToShow: 3, slidesToScroll: 1 }); }); 맛집사진 갤러리 맛집 & 핫플이 필요하신 경우 연락주세요. 언제든지 환영합니다. slick 슬라이드 왼쪽은 파란색 배경 before 오른쪽을 슬라이드 입니다. 이전 다음 #container{width:1500px; margin:50px auto 0; } #container h2.. 2020. 7. 16. 수량버튼 + / - 클릭시 총 금액 변경 스크립트 display:table을 이용하여 왼쪽 오른쪽 정렬하고 수량 up down 이미지 클릭했을 때 input 태그에 수량이 같이 올라가며 총금액도 변환되어야 한다. input id값은 수정시 스크립트도 같이 수정해 줘야하며 수량을 직접 입력하지 않게 하기위해 readonly가 있어야한다. 수량표시 + / - 정가 ￦200,000 판매가 ￦160,000 플러스 마이너스 총 금액 74,000 Number.prototype.format = function(){ if(this==0) return 0; var reg = /(^[+-]?\d+)(\d{3})/; var n = (this + ''); while (reg.test(n)) n = n.replace(reg, '$1' + ',' + '$2'); return n.. 2020. 7. 11. 이전 1 2 3 다음 반응형
