JS Day 16 이미지 슬라이드
17 Mar 2021 | JavascriptJS Day 16 이미지 슬라이드
-
이미지 슬라이드 구현하기
<div class="p3_wrapper"></div>
<div class="p3_container">
<ul class="p3_slider">
<li class="p3_item"></li>
<li class="p3_item"></li>
<li class="p3_item"></li>
</ul>
</div>
<div class="p3_btn_container">
<a class="p3_btn prev">❮</a>
<a class="p3_btn next">❯</a>
</div>
</div>
- ul 태그에 슬라이드 이미지가 들어갈 li 태그를 임시로 3개 배치
- ul을 감싸는 container와 prev, next 버튼이 들어가는 container를 배치
- 전체를 감싸는 wrapper가 있는데 자바스크립트와는 연관이 없다
.p3_wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.p3_container {
width: 100vw;
height: 100vh;
overflow: hidden;
position: relative;
}
.p3_slider {
display: flex;
position: absolute;
list-style: none;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
padding: 0;
transition: all 0.25s cubic-bezier(1, 0.01, 0.32, 1);
}
.p3_item {
width: 100%;
height: 100%;
}
.p3_btn_prev {
font-size: 100px;
cursor: pointer;
position: absolute;
top: 50%;
left: 20px;
}
.p3_btn_next {
font-size: 100px;
cursor: pointer;
position: absolute;
top: 50%;
right: 50px;
}
- 3개의 가로로 연결되는 슬라이드 이미지를 배치하고 뷰포트와 각각의 슬라이드의 크기는 화면의 전체크기와 같다
const slideWrapper = document.querySelector('.p3_container');
const slides = document.querySelectorAll('.p3_item');
const slider = document.querySelector('.p3_slider');
const nextBtn = document.querySelector('.p3_btn_next');
const prevBtn = document.querySelector('.p3_btn_prev');
// 슬라이드의 배경색, 서버에서 데이터를 받아올 경우
// 이처럼 json의 이미지를 배열로 받아온다
const colors = ['green', 'white', 'yellow'];
// item 요소들 background 변경
for (let i = 0; i < slides.length; i++) {
slides[i].style.background = colors[i];
}
// 전체 슬라이드 개수
let totalSlides = slides.length;
// 슬라이드 너비
const slideWidth = slideWrapper.clientWidth;
// 슬라이드 index
let slideIndex = 0;
// 슬라이더 크기
slider.style.width = slideWidth * totalSlides + 'px';
// index를 매개변수로 받는 showSlides 함수
const showSlides = (n) => {
slideIndex = n;
// 처음 슬라이드에서 prev 버튼을 누르면 마지막 슬라이드로 이동
if (slideIndex == -1) {
slideIndex = totalSlides - 1;
} else if (slideIndex === totalSlides) { // 마지막 슬라이드까지 가면 초기화
slideIndex = 0;
}
// 슬라이드 크기 * 인덱스만큼 밀어준다
slider.style.left = -(slideWidth * slideIndex) + 'px';
};
// slideIndex에 n만큼 더해서 showSlides 함수를 호출
const plusSlides = (n) => {
showSlides((slideIndex += n));
};
// 이벤트 hook
nextBtn.addEventListener('click', () => plusSlides(1));
prevBtn.addEventListener('click', () => plusSlides(-1));
- 이렇게 코드를 작성할 경우 마지막 슬라이드에서 next 버튼을 누르면 처음으로 돌아가는 애니메이션이 매우 부자연스럽다
- 자연스러운 전환을 위해서는 1번 슬라이드를 마지막 슬라이드 뒤에 붙이고 마찬가지로 마지막 슬라이드를 1번 슬라이드 앞에 붙여서 해결해야한다
- 다음 과제는 무한 슬라이드 구현이다