MOKKOZI
모꼬지닷컴
MENU
DESIGN
DESIGN
LINK
디자인
컬러
디자인시스템
UX/UI
UX/UI
UXUI LINK
AI
AI
AI LINK
무료AI
이미지 생성
음성
AI 툴
PLAN
PLAN
WEB
WEB
WEBLINK
웹제작
호스팅
도메인
STUDY
Graphic
포토샵
일러스트레이터
애프터 이펙트
UXUI 디자인
UXUI
웹 디자인
모바일 디자인
UI Tools
피그마
스케치
XD
프로토파이
제플린
Cording
웹 코딩
워드프레스
Lottie
Three.js
ACT
ACT
GOODS
INFOMATION
MARKETING
BEST LINK
SCHEDULE
SCHEDULE
PROFILE
PORTFOLIO
SITE SNS
SITE
SNS
BLOG
제작 문의
DESIGN
DESIGN
LINK
UX/UI
UX/UI
UXUI LINK
AI
AI
AI LINK
PLAN
PLAN
WEB
WEB
WEBLINK
STUDY
Graphic
UXUI 디자인
UI Tools
Cording
ACT
ACT
GOODS
INFOMATION
MARKETING
BEST LINK
SCHEDULE
SCHEDULE
PROFILE
PORTFOLIO
SITE SNS
제작 문의
UI Tools
UI Tools 글답변
이름
필수
비밀번호
필수
E-mail
홈페이지
포토
이모티콘
FA아이콘
내사진
분류
선택하세요
피그마
스케치
XD
프로토파이
제플린
제목
필수
안내
지도
웹에디터 시작
> > > 안녕하세요. 이번에는 무한 루프 슬라이더 표현하는 방법을 알려드릴게요! 오픈 카톡 방에서 루프 되는 슬라이드가 어떻게 작업하는지 물어보신 분이 계셔서 강좌로 만들었습니다. > 완성된 예제는 인디케이터가 동작하고, 스와이프도 되고, 좌우 화살표가 있어서 탭을 하면 슬라이드가 작동도 하죠. 물론, 모바일에서는 이런 화살표는 사용 안 하지만 나중에 웹 프로토타입 할 때 활용할 수 있을 것 같아서 기능을 추가해서 강좌로 만들었습니다. > 그리고 슬라이드 이동 후 그 페이지에 맞게 문구나 이미지도 나타납니다. > > 이 많은 것을 프로토파이로 구현이 가능합니다. 무한 루프 슬라이더를 만들기 위해서 크게 4단계로 나눠서 진행해볼게요. > 1단계 : Paging을 이용해서 슬라이더 만들기 > 2단계 : 변수 등록해서 Paging의 가로 ScrollOffset 값을 구하기 > 3단계 : Detect라는 트리거를 통해 Paging의 스크롤 값이 달라짐에 따라 Condition을 걸어서 인터렉션 추가하기 > 4단계 : 이전/다음 화살표 탭 했을 때 기능 추가하고 컨디션으로 무한 루프 추가 > >
웹 에디터 끝
링크 #1
유튜브, 비메오 등 동영상 공유주소 등록시 해당 동영상은 본문 자동실행
링크 #2
첨부파일
파일추가
파일삭제
첨부사진
상단출력
하단출력
본문삽입
본문삽입시 {이미지:0}, {이미지:1} 형태로 글내용 입력시 지정 첨부사진이 출력됨
자동등록방지
숫자음성듣기
새로고침
자동등록방지 숫자를 순서대로 입력하세요.
작성완료
취소
Category
Graphic
UXUI 디자인
UI Tools
피그마
스케치
XD
프로토파이
제플린
Cording