728x90
https://takeknowledge.tistory.com/34
CSS와 javascript는 눈보다 빠르다 슬라이드와 무한슬라이드
일정 시간이 지나면 가로로 넘어가는 슬라이드를 만들어보자. 준비물은 다음과 같다. div 하나, 가로로 쭉 이어붙인 li 다섯개, 그 li 다섯개의 총 너비와 같은 너비를 가진 ul 하나! 여기에 필자는
takeknowledge.tistory.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>무한 슬라이드</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="slide_box">
<ul class="slide_wrap">
<li class="slide_item"><a href="#">slide 1</a></li>
<li class="slide_item"><a href="#">slide 2</a></li>
<li class="slide_item"><a href="#">slide 3</a></li>
<li class="slide_item"><a href="#">slide 4</a></li>
<li class="slide_item"><a href="#">slide 5</a></li>
</ul>
</div>
<script src="./app.js"></script>
</body>
</html>:root{
--slide-width: 800px;
--slide-count: 6; /* 복사한 첫번째 슬라이드 포함 6개 */
--slide-height: 500px;
}
body * {
height: 50px;
}
.slide_box{
width: var(--slide-width);
height: var(--slide-height);
position: relative;
left: 50%; top: 50%;
transform: translate(-50%, 50%);
/* border: 5px blue solid; */
z-index: 100;
overflow: hidden;
}
.slide_wrap{
/* background: red; */
width: calc(var(--slide-width)*var(--slide-count));
height: var(--slide-height);
margin: 0;
padding: 0;
display: flex;
}
.slide_item{
background: orange;
width: var(--slide-width);
height: var(--slide-height);
list-style: none;
text-align: center;
line-height: var(--slide-height);
}
.slide_item a{
text-decoration: none;
color : #fff;
font-size: 5rem;
}let slideWidth = 800 // 슬라이드 너비
const ul = document.querySelector('.slide_wrap');
const firstItemClone = ul.firstElementChild.cloneNode(true); // 첫번째 슬라이드 복사하기
ul.appendChild(firstItemClone); // 맨 뒤에 첫번째 슬라이드 추가하기
function move(){
let curIndex = 0;
setInterval(function(){
ul.style.transition = '0.2s'; // 0.2초동안 슬라이드 이동
ul.style.transform = "translate3d(-"+slideWidth*(curIndex+1)+"px, 0px, 0px)";
curIndex++;
if(curIndex === 5){ // 마지막 복사본 슬라이드가 자리잡자마자 (200ms 후) 원래는 1초 후에 두번째 슬라이드로 이동해야 하지만 그전에 재빠르게(200ms 후) 트랜지션 효과를 끄고 첫번째 슬라이드로 이동함
setTimeout(function(){
ul.style.transition = '0s';
ul.style.transform = "translate3d(0px, 0px, 0px)";
},201)
curIndex = 0;
}
},1000); // 1초동안 슬라이드 정지
}
document.addEventListener("DOMContentLoaded",function(){
move();
});
1. 첫번째 슬라이드를 맨 뒤에 복사 붙여넣기 한다.
2. setInterval을 설정하여 1초마다 슬라이드가 움직이도록 한다.
3. 마지막 슬라이드(첫번째 슬라이드의 복사본)가 0.2s 동안 움직여서 정지하자마자 다시 첫번째 슬라이드로 이동하면서 트랜지션 효과는 끈다. 트랜지션 효과를 끄면 곧바로 띡하고 이동한다.
4. 1초 후에 두번째 슬라이드로 이동한다.
728x90
'프론트엔드 > 컴포넌트' 카테고리의 다른 글
| 부드러운 가로 스크롤링 (2) (0) | 2023.07.05 |
|---|---|
| 부드러운 가로 스크롤링 (0) | 2023.06.27 |
| 자바스크립트없이 드롭다운 메뉴 만들기 (3) (0) | 2023.04.14 |
| 자바스크립트없이 드롭다운 메뉴 만들기 (2) (0) | 2023.04.14 |
| 카드 컴포넌트 및 리뷰 컴포넌트 만들기 (2) (0) | 2023.04.14 |