Archive
내일은 가족모임
오늘의 한 줄 총평 : 하나 둘 차근차근 만들다보면..
메인 페이지가 나왔으니 이걸 토대로 세부 페이지도 하나 둘 그려나가는 작업을 진행해야겠다.
오늘의 한 줄 총평 : 주말동안 화면 그리기
재밌지만 한 번 집중하면 시간가는 줄 모르고 주변을 잘 못보는것 같다..
오늘의 한 줄 총평 : 지도 구현 성공
실무에서도 플러그인을 사용하는지, 아니면 직접 구현을 하는 경우가 많은지 알아봐야겠다.
오늘의 한 줄 총평 : 재미난 플러그인 많이 찾았는데..
<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>
.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;
}
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));