prev next

Javascript Slide Effect08

이미즈 슬라이드 - 무한, 버튼 추가, 닷 버튼 추가, 자동 플레이, 플레이 버튼, 정지 버튼

1
2
3
4
5
6
7
8

<section id="sliderType05">
    <div class="slider__wrap">
        <div class="slider__img">
            <!-- slider*5>img[src="img/img$$.jpg" alt="이미지$"] -->
            <div class="slider"><img src="img/imges01.png" alt="이미지1"></div>
            <div class="slider"><img src="img/imges02.jpg" alt="이미지2"></div>
            <div class="slider"><img src="img/imges03.jpg" alt="이미지3"></div>
            <div class="slider"><img src="img/imges04.jpg" alt="이미지4"></div>
            <div class="slider"><img src="img/imges05.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>
</section>

<style>
    @import url(css/NexonLv1Gothic.css);
    @import url(css/github.min.css);
    @import url(css/custom.css);

    /* slider */
    .slider__wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }

    .slider__img {
        position: relative;
        /* 화면 보이는 구간 */
        width: 800px;
        height: 480px;
        overflow: hidden;
    }

    .slider__inner {
        position: relative;          /* 움직이는 영역 */
        display: flex;
        width: 10000px;             /* 이미지 총 길이 */
        left: -800px;
    }
    .slider__inner.transition {
        transition: all 600ms;
    }

    .slider {
        width: 800px;
    }

    .slider__img .slider {
        position: relative;
    }

    .slider::before {
        position: absolute;
        left: 5px;
        top: 5px;
        background: rgba(0, 0, 0, 0.4);
        color: #fff;
        padding: 5px 10px 3px;
    }

    .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;
        background: rgb(0, 0, 0, 0.4);
        width: 50px;
        height: 50px;
        text-align: center;
        transition: all 0.2s;
        line-height: 50px;
        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: 45%;
        transform: translateY(-50%);
        bottom: 20px;
    }

    .slider__dot .dot {
        width: 20px;
        height: 20px;
        background: rgba(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);
    }
    .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.show {
        display: inline-block;
    }
    .slider__dot .play::after {
        content: '';
        border-style: solid;
        border-width: 10px 0 10px 16px;
        border-color: transparent transparent transparent #fff;
        position: absolute;
        left: 2px; top: 0px;
    }
    .slider__dot .stop {
        width: 20px; height: 20px;
        display: inline-block;
        vertical-align: 9px;
        margin: 3px;
        text-indent: -9999px;
        position: relative;
        display: none;
    }
    .slider__dot .stop.show {
        display: inline-block;
    }
    .slider__dot .stop::before {
        content: '';
        width: 5px; height: 20px;
        background: #fff;
        position: absolute;
        left: 2.5px;
        top: 0;
    }
    .slider__dot .stop::after {
        content: '';
        width: 5px; height: 20px;
        background: #fff;
        position: absolute;
        right: 2.5px;
        top: 0;
    }
    .slider__dot .play:active::after {border-color: transparent transparent transparent rgb(143, 143, 143);}
    .slider__dot .stop:active::before, .slider__dot .stop:active::after {background: rgb(143, 143, 143);}
</style>

<script>
    highlightAll();
    modal();
    tabMenu();
    // slider07
    const sliderWrap = document.querySelector(".slider__wrap");
    const sliderImg = document.querySelector(".slider__img");
    const sliderInner = document.querySelector(".slider__inner");
    const slider = document.querySelectorAll(".slider");
    const sliderBtn = document.querySelector(".slider__btn");
    const sliderBtnPrev = document.querySelector(".slider__btn .prev");
    const sliderBtnNext = document.querySelector(".slider__btn .next");
    const sliderDot = document.querySelector(".slider__dot");
    
    let currentIndex = 0;
    let sliderWidth = sliderImg.offsetWidth;    //이미지 가로 값
    let sliderLength = slider.length    //이미지 갯수
    let slideFirst = slider[0]; //첫 번째 이미지
    let slideLast = slider[sliderLength - 1]; //마지막 이미지
    let cloneFirst = slideFirst.cloneNode(true);    //첫 번째 이미지 복사
    let cloneLast = slideLast.cloneNode(true);  //마지막 이미지 복사
    let posInitial = "";
    let dotIndex = "";
    let sliderTimer = "";
    let interval = 2500;

    //이미지 복사 jQrery = appendTo()/preppendTo
    sliderInner.appendChild(cloneFirst);
    sliderInner.insertBefore(cloneLast, slideFirst);

    function gotoSlider(index){
        sliderInner.classList.add("transition");
        sliderInner.style.left = -sliderWidth * (index + 1) + "px";
        console.log(currentIndex);
        currentIndex = index;
        dotActive();
    }

    function dotInit(){
        for(let i=0; i { //전체 닷 메뉴 비활성화
            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");
        }
    }
    dotInit();

    function autoPlay(){
        sliderTimer = setInterval(()=>{
            gotoSlider(currentIndex + 1);
        }, interval)
    }
    autoPlay()

    function stopPlay(){
        clearInterval(sliderTimer);
    }

    sliderBtnPrev.addEventListener("click", () => {
        let prevIndex = currentIndex - 1;
        gotoSlider(prevIndex);
    });
    sliderBtnNext.addEventListener("click", () => {
        let nextIndex = currentIndex + 1;
        gotoSlider(nextIndex);
    });
    
    sliderInner.addEventListener("transitionend", () => {
        sliderInner.classList.remove("transition");
        if(currentIndex == -1){
            sliderInner.style.left =  -(sliderLength * sliderWidth) + "px";
        console.log(currentIndex);
        currentIndex = sliderLength -1;
        }
        if(currentIndex == sliderLength){
            sliderInner.style.left = -(1 * sliderWidth) + "px";
        console.log(currentIndex);
        currentIndex = 0;
        }
    });

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