# slide
[Megabyte School] 무한으로 즐기는 슬라이드 만들기 : 무한루프&자동변환
이전 글 코드 간소화하기.이전 글 슬라이드를 무한루프로 변경.이전 글 슬라이드에 자동변환 기능 추가.이전 글 슬라이드 코드에서 슬라이드를 실행하는 부분을 따로 함수로 빼내어 작성했고, transition 기능을 CSS에서 빼내어 move() 함수에 추가했다.무한루프를
[Megabyte School] Javascript로 슬라이드 만들기
슬라이드 끝부분에서는 슬라이드 이미지가 빈 화면으로 넘어가지 않게 하기n개의 슬라이드를 넣어도 별도 수정없이 동작 가능하게 하기다양한 크기의 이미지를 넣어도 별도 별도 수정없이 동작 가능하게 하기하나의 함수로 버튼 두 개를 관리하기하나의 함수로 버튼을 설정하라는 조건이
React Img Slider 구현(useRef)
프로젝트중 슬라이드를 구현해야해서 찾아보니깐 useRef로 구현가능하다는걸 배웠다. React에서 제공하는 기본 Hook들을 제대로 사용할 알면 금방 작성할 수 있다.가장 상단 Wrapper에다가 overflow: hidden을 걸어줘야 작동을 한다. SlideWrap
[TIL]_ React Slide
🌈 React에서 이미지슬라이드 기능 구현 🌀React slide 👉 React로 '홀라' 프로젝트 진행 중 내가 맡은 기능 구현은 '메인 슬라이더'였다. 처음 슬라이드 기능을 구현할 때 정말 감이 아예 안왔다.... 물어도 보고 구글링도 해보고 혼자 생각도 해보았다. class형 component에서 슬라이드 기능 구현을 찾는게 생각보다 쉽지는 ...
Interactive한 페이지를 나도 한번 만들어보자!
interactive한 페이지를 만들기 위해 스크롤에 연동되는 3가지 방법에 대해 구현을 해보고 어떤 방법이 가장 괜찮은지를 다룹니다.
자기소개 페이지(3) JS적용
html과 css만으로 만들었던 자기소개 페이지🤨 '자바스크립트 배우면 꼭 이것도 만들고 저것도 만들고...' 마음속으로 다짐했던 자바스크립트 기능을 넣어보기로 했다.
.gif)
[인스타클론] js와 css를 이용한 이미지 크로스페이드
.gif) 인스타그램의 로그인 페이지 오늘은 인스타그램 로그인 페이지의 이미지 순환을 따라해보려한다. 인스타그램을 보면 이미지 순서가 바뀌는 걸 볼 수 있는데, 이미지 배열의 첫번째 자식요소가 opacity: 1 인 형식으로 따라해보려한다.
setTimeout/setInterval
프로젝트 중 슬라이드가 초마다 넘어가는 것을 구현하고 싶었다.keyword는 setTimeout/setIntervalsetTimeout은 일정시간이 지난 후 함수를 실행setInterval은 일정시간적을 함수를 반복둘다 계속 반복적으로 실행되는 줄 알았다. 그런데 co
쇼핑하우 클론코딩
이번주 공부 기간에 위의 3가지 기능 중 2가지를 구현하였다.구현한 기능carousel_slide더보기 button구현하지 못한 기능마우스 드래그시 이미지 5개씩 슬라이드Carousel(캐러셀)이란?캐러셀은 메인 페이지에서 마케팅 정보를 보여주는 한 가지 방법이다. 한
TIL 34일차 - [졸린새x코공] 슬라이드 구현
평화로운 지난 목요일.나와 지상이는 이번에는 slide기능을 구현해보기로 했다. 이 기능을 이용해서 게임 홈페이지 같은 곳에서 흔히 볼 수 있는 이벤트나 업데이트 소식이 슬라이드로 넘어가는 것과, 메뉴창을 만들어 보았다.gif가 부드럽지 않아서 그렇지 실제로 보면 더
project-Aesop) Slide
(순수 js로만 구현)slick, Glider 등의 라이브러리를 사용할까 하다가 react hook으로 작성된 slide 코드를 참고하여 내 조건에 맞게 바꿔서 class함수로 작성하였다.(덕분에 componentDidUpdate의 개념을 얼추 이해하게 됐....)처음
Vue.js에 slide 적용하기 (Vueper Slides)
시작 및 사용법 모듈 설치 Import > 모듈을 설치하고 임포트를 하면 사용할 준비가 끝납니다. > 사용법은 해당 모듈 사이트에 너무 자세히 나와있어 부가 설명이 불필요할 것으로 판단하여 사이트 주소를 남깁니다. > 공식 사이트: Vueper Slides > >