728x90
반응형
슬라이드 이펙트06
슬라이드 이펙트 - 이미지 슬라이드 (버튼, 닷메뉴, 무한)
HTML
<main id="main">
<section id="sliderType01">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider__inner">
<div class="slider s1"><span>이미지1</span><img src="../assets/img/effect_bg11-min.jpg" alt="이미지">
</div>
<div class="slider s2"><span>이미지2</span><img src="../assets/img/effect_bg12-min.jpg" alt="이미지">
</div>
<div class="slider s3"><span>이미지3</span><img src="../assets/img/effect_bg13-min.jpg" alt="이미지">
</div>
<div class="slider s4"><span>이미지4</span><img src="../assets/img/effect_bg14-min.jpg" alt="이미지">
</div>
<div class="slider s5"><span>이미지5</span><img src="../assets/img/effect_bg15-min.jpg" alt="이미지">
</div>
</div>
</div>
<div class="slider__btn">
<button href="#" class="prev">prev</button>
<button href="#" class="next">next</button>
</div>
<div class="slider__dot">
<!-- <a href="#" class="dot active">이미지1</a>
<a href="#" class="dot">이미지2</a>
<a href="#" class="dot">이미지3</a>
<a href="#" class="dot">이미지4</a>
<a href="#" class="dot">이미지5</a> -->
</div>
</div>
</section>
</main>
CSS
/* slider */
.slider__wrap {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.slider__img {
/* 이미지 보이는 영역 */
position: relative;
width: 800px;
height: 450px;
}
.slider__inner {
/* 이미지를 감싸고 있는 부모 : 움직이는 부분 */
display: flex;
flex-wrap: wrap;
width: 10000px;
/*총 이미지 6개 + 2개 이미지가 깨지지 않게 하기 위해...10000으로 설정*/
height: 450px;
position: relative;
left: -800px;
}
.slider__inner.transition {
transition: all 0.3s;
}
.slider {
/* 개별적인 이미지 */
position: relative;
width: 800px;
height: 450px;
}
.slider span {
position: absolute;
left: 5px;
top: 5px;
background: rgba(0, 0, 0, 0.4);
color: #fff;
padding: 5px 10px;
}
@media (max-width : 800px) {
.slider__img {
width: 400px;
height: 225px;
}
}
.slider__btn button {
position: absolute;
top: 50%;
transform: translateY(-50%);
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;
pointer-events: auto;
border: 0;
cursor: pointer;
}
.slider__btn .disable button {
pointer-events: none;
}
.slider__btn button:hover {
border-radius: 50%;
background: rgb(159, 152, 168);
}
.slider__btn button.prev {
left: 0;
}
.slider__btn button.next {
right: 0;
}
.slider__dot {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
}
.slider__dot .dot {
width: 20px;
height: 20px;
background: rgba(0, 0, 0, 0.4);
display: inline-block;
border-radius: 50%;
text-indent: -9999px;
transition: all 0.3;
margin: 3px;
}
.slider__dot .dot.active {
background: rgba(255, 255, 255, 0.9);
}
script 소스
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = document.querySelector(".slider__img"); //보여지는 영역
const sliderInner = document.querySelector(".slider__inner"); //움직이는 영역
const slider = document.querySelectorAll(".slider"); //각각 이미지
const sliderDot = document.querySelector(".slider__dot"); // 닷 메뉴
const sliderBtn = document.querySelector(".slider__btn"); //버튼
const sliderBtnPrev = document.querySelector(".slider__btn .prev"); //왼쪽 버튼
const sliderBtnNext = document.querySelector(".slider__btn .next"); // 오른쪽 버튼
let currentIndex = 0, // 현재 이미지
sliderLength = slider.length,
sliderWidth = slider[0].offsetWidth // 슬라이드 Width 값
sliderFirst = slider[0], // 첫번째 이미지
sliderLast = slider[sliderLength - 1], // 마지막 이미지
cloneFirst = sliderFirst.cloneNode(true), // 첫번째 이미지 복사
cloneLast = sliderLast.cloneNode(true), // 마지막 이미지 복사
dotIndex = "";
sliderInner.appendChild(cloneFirst);
sliderInner.insertBefore(cloneLast, sliderFirst);
function init() {
// 이미지 갯수만큼 닷 메뉴 생기게...
for (let i = 0; i < sliderLength; i++) {
dotIndex += "<a href='#' class='dot'></a>";
}
sliderDot.innerHTML = dotIndex;
sliderDot.firstElementChild.classList.add("active");
}
init();
// 움직이게 작업
function gotoSlider(direction) {
sliderInner.classList.add("transition");
posInitial = sliderInner.offsetLeft; // 현재 위치값
console.log(posInitial)
if (direction == -1) {
sliderInner.style.left = (posInitial + sliderWidth) + "px"; // 이미지 초기화 시켜줌
currentIndex--;
} else if (direction == 1) {
sliderInner.style.left = (posInitial - sliderWidth) + "px"; // 이미지 초기화 시켜줌
currentIndex++;
}
// 닷 메뉴
let dotActive = document.querySelectorAll(".slider__dot .dot");
dotActive.forEach(el => el.classList.remove("active"));
dotActive[direction].classList.add("active");
}
// 순간이동 이미지 슬라이드
function checkIndex() {
sliderInner.classList.remove("transition");
sliderBtnPrev.classList.add("disable");
sliderBtnNext.classList.add("disable");
console.log(currentIndex)
// 마지막 이미지
if (currentIndex == sliderLength) {
sliderInner.style.left = -(1 * sliderWidth) + "px";
currentIndex = 0;
}
// 처음 이미지
if (currentIndex == -1) {
sliderInner.style.left = -(sliderLength * sliderWidth) + "px";
currentIndex = sliderLength - 1;
}
}
// 버튼 클릭
document.querySelectorAll(".slider__btn .button").forEach((btn, index) => {
btn.addEventListener("click", () => {
let prevIndex = (currentIndex + (sliderCount - 1)) % sliderCount;
let nextIndex = (currentIndex + 1) % sliderCount;
if (btn.classList.contains("prev")) {
gotoSlider(prevIndex);
} else {
gotoSlider(nextIndex);
}
});
})
// 닷 버튼 클릭했을 때
document.querySelectorAll(".slider__dot .dot").forEach((dot, index) => {
dot.addEventListener("click", () => {
gotoSlider(index);
});
});
sliderBtnPrev.addEventListener("click", () => {
gotoSlider(-1);
setTimeout(() => {
sliderBtn.classList.remove("disable");
}, 300);
});
sliderBtnNext.addEventListener("click", () => {
gotoSlider(1);
setTimeout(() => {
sliderBtn.classList.remove("disable");
}, 300);
});
sliderInner.addEventListener("transitionend", checkIndex);
728x90
댓글