Slideshow Gallery 3

Slideshow Gallery 2의 내용을 고도화 시켜 컴포넌트화 시키는 작업을 진행했다.

JAVASCRIPT

function button1_click() {
    init();

    var strPath  = "https://via.placeholder.com/325x260/0A174E/0A174E,";
        strPath += "https://via.placeholder.com/325x260/07553B/07553B,";
        strPath += "https://via.placeholder.com/325x260/50586C/50586C,";
        strPath += "https://via.placeholder.com/325x260/DCE2F0/DCE2F0,";
        strPath += "https://via.placeholder.com/325x260/815854/815854,";
        strPath += "https://via.placeholder.com/325x260/F9EBDE/F9EBDE";

    setNavImage(strPath); 
    showSlides(slideIndex);
    setBtnoff(strPath);
}

// 이제 strIndex를 직접 입력해줄 필요가 없다. strPath를 사용하여 자동으로 계산해준다.

function setNavImage(strPath) {
    console.log("setNavImage 실행: "); 
    var aPath = strPath.split(','); 
    arrPath = aPath; 

    var strIndex = ""
    for ( var i = 1 ; i <= aPath.length; i++ ) {
        strIndex += i+",";
    }
    strIndex = strIndex.slice(0, -1);
    // 주소 갯수 받아와서 그 앞까지 , 로 숫자 추가해준 뒤 마지막 , 삭제

    var aIndex = strIndex.split(','); 
    var tagStr = ""; 
    
    totalLen = aPath.length;
    for (var i = 0; i < totalLen; i++) {
        tagStr += '<div class="column"> <img class="demo " src="' + aPath[i] + '"token operator">+ aIndex[i] + ')"> </div> \n';
    }

    var navImg = document.getElementById("NavImg");
    navImg.innerHTML = tagStr; 
}

// 주소가 담긴 데이터의 갯수를 "," 문자열로 구분해 준 뒤, 마지막 ","는 삭제 한다.

function plusSlides(n) {
    console.log("plusSlides 실행: ");
    if (n > 0) {
        slideIndex += 1;
        if (slideIndex > totalLen) {
            slideIndex = totalLen;
            document.getElementById('next').style.color="#ffff0000";
        }
    } else {
        slideIndex -= 1;
        if (slideIndex < 1) {
            slideIndex = 1;
            document.getElementById('prev').style.color="#ffff0000";
        }
    }

    showSlides(slideIndex);

    if (n > 0) {
        var _scrollX = $('.row').scrollLeft();
        $('.row').scrollLeft(_scrollX + moveDistance);
    } else {
        var _scrollX = $('.row').scrollLeft();
        $('.row').scrollLeft(_scrollX - moveDistance);
    }
}

// 만약 slider 갯수가 없거나, 1개이면 prev, next 버튼을 투명화 시켜준다.

- 끝 -