무한 슬라이드 만들기
포스팅 요약
1. 결과 영상
2. 코드
3. 동작 원리
4. 깃허브 코드
5. 참고 링크 (일반 슬라이드, 3d슬라이드)
결과영상
* 안되시는 분들은 댓글에서 물어보셔도 됩니다 :)
* 댓글에 남긴 메일로 압축파일 보내신 후 물어보셔도 됩니다 :)
코드
main.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>슬라이드</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<div id="slideShow">
<ul class="slides">
<li><img src="image/flower.jpg" alt=""></li>
<li><img src="image/fox.jpg" alt=""></li>
<li><img src="image/lightning.jpg" alt=""></li>
<li><img src="image/moon.jpg" alt=""></li>
<li><img src="image/nature.jpg" alt=""></li>
<li><img src="image/space.jpg" alt=""></li>
</ul>
<p class="controller">
<!-- &lang: 왼쪽 방향 화살표 &rang: 오른쪽 방향 화살표 -->
<span class="prev">⟨</span>
<span class="next">⟩</span>
</p>
</div>
<script src="JS/slideShow.js"></script>
</body>
</html>
JS/slideShow.js
let slides = document.querySelector('.slides');
let slideImg = document.querySelectorAll('.slides li');
currentIdx = 0;
slideCount = slideImg.length;
prev = document.querySelector('.prev'); //이전 버튼
next = document.querySelector('.next'); //다음 버튼
slideWidth = 300; //슬라이드이미지 넓이
slideMargin = 100; //슬라이드 끼리의 마진값
makeClone(); // 처음이미지와 마지막 이미지 복사 함수
initfunction(); //슬라이드 넓이와 위치값 초기화 함수
function makeClone() {
let cloneSlide_first = slideImg[0].cloneNode(true);
let cloneSlide_last = slides.lastElementChild.cloneNode(true);
slides.append(cloneSlide_first);
slides.insertBefore(cloneSlide_last, slides.firstElementChild);
}
function initfunction() {
slides.style.width = (slideWidth + slideMargin) * (slideCount + 2) + 'px';
slides.style.left = -(slideWidth + slideMargin) + 'px';
}
next.addEventListener('click', function () {
//다음 버튼 눌렀을때
if (currentIdx <= slideCount - 1) {
//슬라이드이동
slides.style.left = -(currentIdx + 2) * (slideWidth + slideMargin) + 'px';
slides.style.transition = `${0.5}s ease-out`; //이동 속도
}
if (currentIdx === slideCount - 1) {
//마지막 슬라이드 일때
setTimeout(function () {
//0.5초동안 복사한 첫번째 이미지에서, 진짜 첫번째 위치로 이동
slides.style.left = -(slideWidth + slideMargin) + 'px';
slides.style.transition = `${0}s ease-out`;
}, 500);
currentIdx = -1;
}
currentIdx += 1;
});
prev.addEventListener('click', function () {
//이전 버튼 눌렀을때
console.log(currentIdx);
if (currentIdx >= 0) {
slides.style.left = -currentIdx * (slideWidth + slideMargin) + 'px';
slides.style.transition = `${0.5}s ease-out`;
}
if (currentIdx === 0) {
setTimeout(function () {
slides.style.left = -slideCount * (slideWidth + slideMargin) + 'px';
slides.style.transition = `${0}s ease-out`;
}, 500);
currentIdx = slideCount;
}
currentIdx -= 1;
});
CSS/style.css
/* 초기화 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style-type: none;
}
/* 보여줄 구간의 높이와 넓이 설정 */
#slideShow {
/*전체 컨테이너*/
width: 500px;
height: 300px;
position: relative;
margin: 50px auto;
overflow: hidden; /*리스트 형식으로 이미지를 일렬로 정렬할 것이기 때문에, 500px 밖으로 튀어 나간 이미지들은 hidden으로 숨겨줘야됨*/
}
.slides {
/*이미지들이 담겨있는 슬라이드 컨테이너*/
position: absolute;
left: 0;
top: 0;
width: 2500px; /* 슬라이드할 사진과 마진 총 넓이 */
transition: 0.5s ease-out; /*ease-out: 처음에는 느렸다가 점점 빨라짐*/
} /* 첫 번째 슬라이드 가운데에 정렬하기위해 첫번째 슬라이드만 margin-left조정 */
.slides li:first-child {
margin-left: 100px;
} /* 슬라이드들 옆으로 정렬 */
.slides li:not(:last-child) {
float: left;
margin-right: 100px;
}
.controller span {
position: absolute;
background-color: transparent;
color: black;
text-align: center;
border-radius: 50%;
padding: 10px 20px;
top: 50%;
font-size: 1.3em;
cursor: pointer;
} /* 이전, 다음 화살표에 마우스 커서가 올라가 있을때 */
.controller span:hover {
background-color: rgba(128, 128, 128, 0.11);
}
.prev {
left: 10px;
} /* 이전 화살표에 마우스 커서가 올라가 있을때 이전 화살표가 살짝 왼쪽으로 이동하는 효과*/
.prev:hover {
transform: translateX(-10px);
}
.next {
right: 10px;
} /* 다음 화살표에 마우스 커서가 올라가 있을때 이전 화살표가 살짝 오른쪽으로 이동하는 효과*/
.next:hover {
transform: translateX(10px);
}
이미지 파일 (출처는 픽사베이 입니다.)
동작 원리
동작원리를 아시면 위 코드를 보지 않으시고도 어떻게 코드를 짜야될지 아실겁니다!!
무한 슬라이드를 구현하기위해 트릭을 써야 됩니다.
어떤 트릭이냐면 6장의 이미지가 있으면,
1번 이미지를 복사에서 마지막 슬라이드 뒤에 붙이고,
6번 이미지를 복사해서 처음 슬라이드 앞에 붙입니다.
(아래 사진 참조해주세요!)
왜 이렇게 하는지 설명해 드리겠습니다.
다음 버튼을 눌렀을때, transition을 0.5로 설정했을 시,
1번 슬라이드 -> 2번 슬라이드 -> 3번 슬라이드 -> 4번 슬라이드 -> 5번 슬라이드 -> 6번 슬라이드
이런 식으로 슬라이드가 0.5초마다 이동합니다.
그리고 6번 슬라이드때 다음 버튼을 누르면 0.5초동안 복사해서 붙인 1번슬라이드 이미지가 나옵니다.
그전에!!!! 6번 슬라이드에서 setTimeout을 이용해 0.5초 이후에 복사한 1번 슬라이드에서 진짜 1번 슬라이드로
transition 0s를 이용해 바꿔줍니다.
(*transition 0s로 하면 슬라이드가 넘어가는 동작이 안보이기 때문에 0s를 사용합니다.)
뒤에 1번 슬라이드를 복붙한 이유는, 6번 슬라이드에서 1번슬라이드로 넘어가는 과정을 유저에게 보여주기 위함입니다.
마지막에 1번 슬라이드를 붙여주지 않을시, 6번 슬라이드에서 1번슬라이드까지 뒤로 이동합니다.
깃허브 코드
https://github.com/6810779s/-web-Infinite__slide
GitHub - 6810779s/-web-Infinite__slide
Contribute to 6810779s/-web-Infinite__slide development by creating an account on GitHub.
github.com
참고 링크 (일반 슬라이드, 3d슬라이드)
무한 슬라이드가 아니라 그냥 일반 슬라이드를 만드시고 싶으시다면 (마지막 까지 가면 멈추는 슬라이드)
아래 링크를 참조해주세요 :)
2021.05.29 - [웹/HTML-CSS-자바스크립트] - (웹)자바스크립트로 슬라이드 만들기(초간단)
(웹)자바스크립트로 슬라이드 만들기(초간단)
자바스크립트로 자연스러운 슬라이드 만들기 준비물 1. 300*300px 이미지 6장 (아래 파일에 첨부함, 연습하실때 필요하신분들 쓰세요~) 2. visual studio or 다른 개발자 도구 결과물 HTML코드 .
eunhee-programming.tistory.com
3D슬라이드 만들기
2021.07.19 - [웹/HTML-CSS-자바스크립트] - (웹) 회전형 슬라이드/3D 슬라이드 만들기: swiper 사용법 (상세설명)
(웹) 회전형 슬라이드/3D 슬라이드 만들기: swiper 사용법 (상세설명)
회전형 슬라이드 만들기 포스팅 요약 1. 최종 완성 작품 2. swiper 사용해서 3D 슬라이드 만드는법 3. 3D슬라이드 만든 전체 코드 4. 3D슬라이드 코드 다운받을 수 있는 깃허브 주소 더보기 API를 사용
eunhee-programming.tistory.com
'웹 > HTML-CSS-자바스크립트' 카테고리의 다른 글
| scss에서 미디어 쿼리 다루기/ scss 미디어 쿼리 깔끔하게 사용하기 (1) | 2021.08.15 |
|---|---|
| [2021.08]자바스크립트에 미디어쿼리 사용하기+자동 새로고침 (2) | 2021.08.09 |
| (웹) 회전형 슬라이드/3D 슬라이드 만들기: swiper 사용법 (상세설명) (0) | 2021.07.19 |
| (웹)자바스크립트로 슬라이드 만들기(초간단) (25) | 2021.05.29 |
| (웹)자바스크립트 - 실시간 시계 (초간단) (0) | 2021.05.08 |
댓글