prev next

Javascript Slide Effect07

이미즈 슬라이드 - 무한, 버튼 추가, 닷 버튼 추가

<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);
        }
</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 ="";

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

    //이미지 움직이기
    function gotoSlider(direction){
        sliderInner.classList.add("transition");
        posInitial = sliderInner.offsetLeft;

        //오른쪽 버튼
        if(direction == 1){
            sliderInner.style.left = (posInitial - sliderWidth) + "px";
            currentIndex++;
        } 
        //왼쪽 버튼
        if(direction == -1){
            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;
        }
    }

    //버튼 클릭하기
    sliderBtnPrev.addEventListener("click", () => {gotoSlider(-1)});
    sliderBtnNext.addEventListener("click", () => {gotoSlider(1)});
    sliderInner.addEventListener("transitionend", checkIndex);

    dotInit();
</script>