sliderEffect08 - 플레이 스탑 버튼

개요

HTML, CSS는 더이상 의미가 없다

JAVASCRIPT로 승부본다

라고 생각하고 거창하게 글을 쓰려했으나,

생각보다 양이 많아서 마음이 바뀌었다 ^^ ㅎㅎ

 

앞에 것은 생략하고 새로 생긴 플레이, 스탑 버튼만 구현하겠다

 

HTML

function dotInit(){
    for(let i = 0; i < sliderLength; i++){
        dotIndex += "<a href='#' class='dot'></a>";
    }
    dotIndex += "<a href='#' class='play'>play</a>";
    dotIndex += "<a href='#' class='stop show'>stop</a>";
    sliderDot.innerHTML = dotIndex;
    sliderDot.firstElementChild.classList.add("active");
}
dotInit();

저기... 닷버튼을 자바스크립트로 구현했다

 

CSS

.slider__dot .play {
    width: 20px; height: 20px;
    display: inline-block;
    vertical-align: 9px;
    margin: 3px;
    text-indent: -9999px;
    position: relative;
    display: none;
}

.slider__dot .play::after {
    content: '';
    border-style: solid;
    border-width: 10px 0px 10px 18px;
    border-color: transparent transparent transparent #fff;
    position: absolute;
    left: 1px; top: 0;
}

.slider__dot .stop {
    width: 20px; height: 20px;
    display: inline-block;
    vertical-align: 9px;
    margin: 3px;
    text-indent: -9999px;
    position: relative;
    display: none;
}

.slider__dot .play.show {
    display: inline-block;
}

.slider__dot .stop.show {
    display: inline-block;
}

.slider__dot .stop::before {
    content: '';
    position: absolute;
    width: 5px; height: 20px;
    left: 3px; top: 0;
    background: #fff;
    border-radius: 20px;
}

.slider__dot .stop::after {
    content: '';
    position: absolute;
    width: 5px; height: 20px;
    left: 12px; top: 0;
    background: #fff;
    border-radius: 20px;
}

이거  하면서 되게 신기했던 건 삼각형을 가상요소로 만든 것....

 

JAVASCRIPT

sliderBtnNext.addEventListener("mouseenter", () => {
    sliderDot.querySelector(".play").classList.add("show");
    sliderDot.querySelector(".stop").classList.remove("show");
    stopPlay();
})
sliderBtnNext.addEventListener("mouseleave", () => {
    sliderDot.querySelector(".stop").classList.add("show");
    sliderDot.querySelector(".play").classList.remove("show");
    autoPlay();
})

sliderBtnPrev.addEventListener("mouseenter", () => {
    sliderDot.querySelector(".play").classList.add("show");
    sliderDot.querySelector(".stop").classList.remove("show");
    stopPlay();
})
sliderBtnPrev.addEventListener("mouseleave", () => {
    sliderDot.querySelector(".stop").classList.add("show");
    sliderDot.querySelector(".play").classList.remove("show");
    autoPlay();
})

sliderInner.addEventListener("mouseenter", () => {
    sliderDot.querySelector(".play").classList.add("show");
    sliderDot.querySelector(".stop").classList.remove("show");
    stopPlay();
})
sliderInner.addEventListener("mouseleave", () => {
    sliderDot.querySelector(".stop").classList.add("show");
    sliderDot.querySelector(".play").classList.remove("show");
    autoPlay();
})

sliderDot.querySelector(".play").addEventListener("click", () => {
    sliderDot.querySelector(".stop").classList.add("show");
    sliderDot.querySelector(".play").classList.remove("show");
    autoPlay();
});
sliderDot.querySelector(".stop").addEventListener("click", () => {
    sliderDot.querySelector(".play").classList.add("show");
    sliderDot.querySelector(".stop").classList.remove("show");
    stopPlay();
});