이미지 슬라이드 - 무한, 버튼 추가, 닷 버튼 추가
//sliderEffect07
<section id="slideType07">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider__inner">
<div class="slider s1"><img src="img/slide06.jpg" alt="이미지1"></div>
<div class="slider s2"><img src="img/slide07.jpg" alt="이미지2"></div>
<div class="slider s3"><img src="img/slide08.jpg" alt="이미지3"></div>
<div class="slider s4"><img src="img/slide09.jpg" alt="이미지4"></div>
<div class="slider s5"><img src="img/slide10.jpg" alt="이미지5"></div>
</div>
</div>
<div class="slider__btn">
<a href="#" class="prev">prev</a>
<a href="#" class="next">next</a>
</div>
<div class="slider__dot"></div>
</div>
</section>
/* slider */
.slider__wrap {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.slider__img { /* 화면 보이는 구간 */
width: 800px;
height: 480px;
position: relative;
overflow: hidden;
}
.slider__inner { /* 이미지 움직이는 영역 */
display: flex;
position: relative;
width: 10000px; /* 이미지 총 길이 */
left: -800px;
}
.slider__inner.transition {
transition: all 600ms;
}
.slider {
width: 800px;
position: relative;
}
.slider::before {
position: absolute;
left: 5px;
top: 5px;
background: rgba(0,0,0,0.4);
color: #fff;
padding: 3px 10px 5px;
}
.slider.s1::before {content: '이미지1';}
.slider.s2::before {content: '이미지2';}
.slider.s3::before {content: '이미지3';}
.slider.s4::before {content: '이미지4';}
.slider.s5::before {content: '이미지5';}
.slider__btn a {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 100;
width: 50px;
height: 50px;
background: rgba(0,0,0,0.4);
text-align: center;
line-height: 50px;
transition: all 0.2s;
display: block;
color: #fff;
text-decoration: none;
}
.slider__btn a.prev {
left: 0;
}
.slider__btn a.next {
right: 0;
}
.slider__btn a:hover {
background: rgb(241, 96, 86);
}
.slider__dot {
position: absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
}
.slider__dot .dot {
width: 20px;
height: 20px;
background: rgba(0,0,0,0.4);
display: inline-block;
border-radius: 50%;
transition: all 0.3s;
margin: 3px;
}
.slider__dot .dot.active {
background: rgba(255,255,255,0.9);
}
//slider07
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = document.querySelector(".slider__img"); //이미지 보이는 영역
const sliderInner = document.querySelector(".slider__inner"); //이미지 움직이는 영역
const slider = document.querySelectorAll(".slider"); //5개의 이미지 저장
const sliderBtn = document.querySelector(".slider__btn");
const sliderBtnPrev = document.querySelector(".prev");
const sliderBtnNext = document.querySelector(".next");
const sliderDot = document.querySelector(".slider__dot");
let currentIndex = 0;
let sliderWidth = sliderImg.offsetWidth; //이미지 가로값
let sliderLength = slider.length; //이미지 갯수
let sliderFirst = slider[0]; //첫번째 이미지
let sliderLast = slider[sliderLength - 1]; //마지막 이미지
let cloneFirst = sliderFirst.cloneNode(true); //첫번째 이미지 복사
let cloneLast = sliderLast.cloneNode(true); //마지막이미지 복사
let posInitial = "";
let dotIndex = "";
//이미지 복사 appendTo / prependTo : append / prepend
sliderInner.appendChild(cloneFirst);
sliderInner.insertBefore(cloneLast, sliderFirst);
//이미지 움직이기
function gotoSlider(direction){
sliderInner.classList.add("transition");
posInitial = sliderInner.offsetLeft;
console.log(posInitial)
//next 버튼
if(direction == 1){
// left : -800px
sliderInner.style.left = (posInitial - sliderWidth) + "px";
currentIndex++;
}
//prev 버튼
if(direction == -1){
// left : 800px
sliderInner.style.left = (posInitial + sliderWidth) + "px";
currentIndex--;
}
dotActive();
}
//닷 버튼
function dotInit(){
for(let i=0; i<sliderLength; i++){
dotIndex += "<a href='#' class='dot'></a>";
}
sliderDot.innerHTML = dotIndex;
sliderDot.firstElementChild.classList.add("active");
}
// 닷 버튼 활성화
function dotActive(){
let dotAll = document.querySelectorAll(".slider__dot .dot");
//전체 닷 메뉴 비활성화
dotAll.forEach(dot => {
dot.classList.remove("active");
});
//마지막 이미지 왔을 때
if(currentIndex == sliderLength){
dotAll[0].classList.add("active");
} else if(currentIndex == -1){ //처음 이미지 왔을 때
dotAll[sliderLength -1].classList.add("active");
} else {
dotAll[currentIndex].classList.add("active"); //현재 보고있는 이미지 닷 활성화
}
}
// 애니메이션 완료 후
function checkIndex(){
sliderInner.classList.remove("transition");
// 이미지 처음 시작부분
if(currentIndex == -1){
sliderInner.style.left = -(sliderLength * sliderWidth) + "px";
currentIndex = sliderLength -1;
}
// 이미지 마지막 부분
if(currentIndex == sliderLength){
sliderInner.style.left = -(1 * sliderWidth) + "px";
currentIndex = 0;
}
}
dotInit();
//버튼 클릭하기
sliderBtnPrev.addEventListener("click", () => {gotoSlider(-1)});
sliderBtnNext.addEventListener("click", () => {gotoSlider(1)});
sliderInner.addEventListener("transitionend", checkIndex);