728x90
반응형
슬라이드 이펙트07
슬라이드 이펙트 - 이미지 슬라이드 (버튼, 닷메뉴, 무한, 플레이 버튼, 정지 버튼, 자동 플레이)
HTML
<main id="main">
<section id="sliderType01">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider__inner">
<div class="slider"><img src="../assets/img/effect_bg11-min.jpg" alt="이미지"></div>
<div class="slider"><img src="../assets/img/effect_bg12-min.jpg" alt="이미지"></div>
<div class="slider"><img src="../assets/img/effect_bg13-min.jpg" alt="이미지"></div>
<div class="slider"><img src="../assets/img/effect_bg14-min.jpg" alt="이미지"></div>
<div class="slider"><img src="../assets/img/effect_bg15-min.jpg" alt="이미지"></div>
</div>
</div>
<div class="slider__btn">
<a href="#" class="prev">prev</a>
<a href="#" class="next">next</a>
</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;
/* overflow: hidden; */
}
.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);
}
.slider__dot .play {
display: inline-block;
width: 23px;
height: 20px;
margin-left: 5px;
vertical-align: 2px;
border-left: 14px solid #fff;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.slider__dot .stop {
display: inline-block;
width: 16px;
height: 20px;
vertical-align: 2px;
position: relative;
}
.slider__dot .stop::before {
content: '';
width: 5px;
height: 20px;
background: #fff;
position: absolute;
left: 0;
top: 0;
}
.slider__dot .stop::after {
content: '';
width: 5px;
height: 20px;
background: #fff;
position: absolute;
right: 0;
top: 0;
}
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;
let sliderLength = slider.length;
let sliderWidth = slider[0].offsetWidth;
let dotIndex = "";
let interval = 6000;
let sliderTimer = '';
let stopClick = false;
let mouseenterOn = false;
function imgClone() {
let sliderFirst = slider[0];
let sliderLast = slider[sliderLength - 1];
let cloneFirst = sliderFirst.cloneNode(true);
let cloneLast = sliderLast.cloneNode(true);
sliderInner.appendChild(cloneFirst);
sliderInner.insertBefore(cloneLast, sliderFirst);
}
function createDot() {
// dot 추가
for (let i = 0; i < sliderLength; i++) {
dotIndex += "<a href='#' class='dot'></a>";
}
// dot play & stop 추가
dotIndex += `<a href='#' class='play'></a>`;
dotIndex += `<a href='#' class='stop'></a>`;
// 적용
sliderDot.innerHTML = dotIndex;
// active 추가
sliderDot.firstElementChild.classList.add("active");
// 스탑 버튼 감추기
sliderDot.querySelector('.play').style.display = 'none';
}
function autoPlay() {
if (stopClick === true || mouseenterOn === true) return;
// 자동 플레이
console.log("autoPlay 실행");
sliderTimer = setInterval(() => {
let intervalNum = currentIndex + 1;
gotoSlider(intervalNum);
}, interval);
}
function stopPlay() {
// 플레이 정지
clearInterval(sliderTimer);
}
function init() {
// 이미지 복사
imgClone();
// 닷 버튼 생성
createDot();
// 자동 재생
autoPlay();
}
init();
function gotoSlider(index) {
sliderInner.classList.add('transition');
let posInitial = sliderInner.offsetLeft; // -800
sliderInner.style.left = -sliderWidth * (index + 1) + "px";
currentIndex = index;
}
function checkIndex() {
sliderInner.classList.remove('transition');
// 마지막 이미지
if (currentIndex >= sliderLength) {
sliderInner.style.left = `${-(1 * sliderWidth)}px`;
currentIndex = 0;
}
// 처음 이미지
else if (currentIndex < 0) {
sliderInner.style.left = `${-(sliderLength * sliderWidth)}px`;
currentIndex = sliderLength - 1;
}
// 닷 버튼 엑티브 바꿔주기
document.querySelectorAll('.slider__dot a').forEach(b => {
b.classList.remove('active');
});
document.querySelectorAll('.slider__dot a')[currentIndex].classList.add('active');
}
// 이전 버튼 클릭
sliderBtnPrev.addEventListener('click', () => {
let prevIndex = currentIndex - 1;
gotoSlider(prevIndex);
});
// 다음 버튼 클릭
sliderBtnNext.addEventListener('click', () => {
let nextIndex = currentIndex + 1;
gotoSlider(nextIndex);
});
// 트랜지션 끝났을 때
sliderInner.addEventListener('transitionend', () => {
checkIndex();
});
// 마우스 오버 했을 때 정지
sliderInner.addEventListener('mouseenter', () => {
console.log("mouseenter");
mouseenterOn = true; // 움직일 수 없다
stopPlay();
});
// 마우스 떠났을 때 재시작
sliderInner.addEventListener('mouseleave', () => {
console.log("mouseleave");
mouseenterOn = false; // 움직일 수 있다.
clearTimeout(sliderTimer);
autoPlay();
});
// 플레이 || 스탑 버튼 클릭
const sliderBtnPlay = document.querySelector(".slider__dot .play"); // 플레이 버튼
const sliderBtnStop = document.querySelector(".slider__dot .stop"); // 정지 버튼
sliderBtnPlay.addEventListener('click', () => {
stopClick = false;
console.log("sliderBtnPlay");
sliderBtnPlay.style.display = 'none';
sliderBtnStop.style.display = 'inline-block';
clearTimeout(sliderTimer);
autoPlay();
});
sliderBtnStop.addEventListener('click', () => {
stopClick = true;
console.log("sliderBtnStop");
sliderBtnPlay.style.display = 'inline-block';
sliderBtnStop.style.display = 'none';
stopPlay();
});
// 닷 버튼 클릭
document.querySelectorAll('.slider__dot a.dot').forEach((a, index) => {
a.addEventListener('click', e => {
document.querySelectorAll('.slider__dot a.dot').forEach(b => {
b.classList.remove('active');
});
a.classList.add('active');
sliderInner.style.left = `${-((index + 1) * sliderWidth)}px`;
currentIndex = index;
});
});
728x90
댓글