Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- 스파르타 코딩클럽 #내배캠 #최종프로젝트 #로그인 #인증인가 #jwt? #토큰인증 #액세스토큰 #리프레시토큰 #쿠키 #파싱 #서명키의 중요성 #security context holder
- 스파르타코딩클럽 #부트캠프 #IT #백엔드 #머신러닝 #딥러닝 #AI #서버 #자동화 #SQL #기본문법 #데이터베이스
- 스파르타 코딩클럽 #내배캠 #모의면접 #예상질문 #http 메서드 종류 #메서드 #post #put #get #patch #ci #ioc #의존성
- 스파르타 코딩클럽 #내배캠 #모의면접 #예상질문 #http 메서드 종류 #메서드 #post #put #get #patch #최종프로젝트 #aws s3 #프로필 이미지 수정 #자동삭제
- 스파르타코딩클럽 #부트캠프 #IT #백엔드 #머신러닝 #딥러닝 #AI #서버 #자동화 #SQL #기본문법 #데이터베이스 #DBMS #Oracle #MongoDB #아키텍쳐 #DB
- 스프링 #백엔드 #자바
- spring security #jwt 토큰 #json web token #token #직렬화 #인증
- 인가 #
- 공간복잡도 #공간자원 #캐시메모리 #SRAM #DRAM #시간복잡도
- 스파르타 코딩클럽 #내배캠 #모의면접 #예상질문 #http 메서드 종류 #메서드 #post #put #get #patch #대용량트래픽 #처리방법 #캐싱 #코드최적화 #db최적화 #트래픽 #로드밸런서
- 비트 #바이트 #이진수
- 프로세스 #CPU #시공유 #커널
- 챌린저스 #bod
- 스파르타 코딩클럽 #내배캠 #모의면접 #예상질문 #http 메서드 종류 #메서드 #post #put #get #patch #소셜로그인 #네이버 #기능구현 #vue.js #spring boot #네이버로그인 #연동하기
- 스파르타 코딩클럽 #내배캠 #모의면접 #예상질문 #http 메서드 종류 #메서드 #post #put #get #patch #ci #cd
- 스파르타코딩클럽 #부트캠프 #IT #백엔드 #머신러닝 #AI #서버 #자동화 #SQL #KDT #기본문법 #데이터베이스 #Computer #Science #CPU #메모리
- 스파르타 코딩클럽 #내배캠 #최종프로젝트 #4개월삭제 #국비지원 #자바
- java5기
- 스파르타 코딩클럽 #내배캠 #모의면접 #예상질문 #http 메서드 종류 #메서드 #post #put #get #patch #tdd #테스트 주도개발 #테스트코드 #유닛테스트
- 스파르타코딩클럽 #부트캠프 #IT #백엔드 #OSI #ISO #AI #서버 #자동화 #SQL #기본문법 #데이터베이스 #DBMS #Oracle #MongoDB #아키텍쳐 #DB
- 스파르타코딩클럽 #부트캠프 #IT #백엔드 #머신러닝 #AI #서버 #자동화 #SQL #기본문법 #데이터베이스
- 스파르타 코딩클럽 #내배캠 #모의면접 #예상질문 #http 메서드 종류 #메서드 #post #put #get #patch #springmvc패턴 #model #view #controller
- 스파르타코딩클럽 #부트캠프 #IT #백엔드 #머신러닝 #AI #서버 #자동화 #SQL #기본문법 #데이터베이스 #웹개발
- 스파르타 코딩클럽 #인메모리db #h2 #연동이슈 #문제해결 #방법 #spring security #header #
- 쓰레드 #쓰레드풀 #프로세스
- 스파르타 코딩클럽 #내배캠 #모의면접 #예상질문 #http 메서드 종류 #메서드 #post #put #get #patch #트랜잭션전파 #transaction
- 스파르타 코딩클럽 #내배캠 #모의면접 #예상질문 #http 메서드 종류 #메서드 #post #put #get #patch #aop #관점지향프로그래밍 #유지보수
- ci/cd파이프라인
- 스파르타 코딩클럽 #내배캠 #모의면접 #예상질문 #http 메서드 종류 #메서드 #post #put #get #patch #get방식 #post방식 #http프로토콜 #클라이언트 #백엔드 #api
- 보안 #이슈
Archives
- Today
- Total
요리사에서 IT개발자로
스파르타 코딩클럽(사전캠프 프로젝트) 무한 루프 멀티플 슬라이스 코드 본문
var slides = document.querySelector('.slides'),
slide = document.querySelectorAll('.slides li'),
currentIdx = 0,
slideCount = slide.length,
slideWidth = 200,
slideMargin = 30,
prevBtn = document.querySelector('.prev'),
nextBtn = document.querySelector('.next');
makeClone();
function makeClone() {
for (var i = 0; i < slideCount; i++) {
// a.cloneNode(), a.cloneNode(true)
var cloneSlide = slide[i].cloneNode(true);
cloneSlide.classList.add('clone');
// a.appendChild(b)
slides.appendChild(cloneSlide);
}
for (var i = slideCount - 1; i >= 0; i--) {
var cloneSlide = slide[i].cloneNode(true);
cloneSlide.classList.add('clone');
// a.prepend(b)
slides.prepend(cloneSlide);
}
updateWidth();
setInitalPos();
setTimeout(function () {
slides.classList.add('animated');
}, 100)
}
function updateWidth() {
var currentSlides = document.querySelectorAll('.slides li');
var newSlideCount = currentSlides.length;
var newWidth = (slideWidth + slideMargin) * newSlideCount - slideMargin + 'px';
slides.style.width = newWidth;
}
function setInitalPos() {
var initialTranslateValue = -(slideWidth + slideMargin) * slideCount;
// slides( transform:translateX(-1000px));
slides.style.transform = 'translateX(' + initialTranslateValue + 'px)'
}
prevBtn.addEventListener('click', function () {
moveSlide(currentIdx - 1);
});
nextBtn.addEventListener('click', function () {
moveSlide(currentIdx + 1);
});
function moveSlide(num) {
slides.style.left = -num * (slideWidth + slideMargin) + 'px';
currentIdx = num;
console.log(currentIdx, slideCount);
if (currentIdx == slideCount || currentIdx == -slideCount) {
setTimeout(function () {
slides.classList.remove('animated');
slides.style.left = '0px';
currentIdx = 0;
}, 500);
setTimeout(function(){
slides.classList.add('animated');
}, 600);
}
}
반응형
'웹(Web)개발' 카테고리의 다른 글
스파르타 코딩클럽(부트캠프) 웹개발 입문 5장 (0) | 2024.04.12 |
---|---|
스파르타 코딩클럽(부트캠프) 웹개발 입문 4장 (0) | 2024.04.12 |
스파르타 코딩클럽(부트캠프) 웹개발 입문 3장 (0) | 2024.04.08 |
스파르타 코딩클럽(부트캠프) 웹개발 입문 2장 (1) | 2024.03.24 |
스파르타 코딩클럽(부트캠프) 웹개발 입문 1장 (0) | 2024.03.10 |