좌우형 슬라이드 갤러리 - 바닐라 스크립트 > 팁

• 목록

<style>
#buttonDiv { display:flex; justify-content:center; align-items:center; }
.spanButton { cursor:pointer; margin-left:5px; opacity:0.7; border-radius:50%; }
.slideNum { font-family:Times New Roman; font-size:24px; font-weight:bold; color:#ffffff; }
</style>
<script>
hwRatio = 540 / 960; // 이미지 세로 가로 사이즈 - 세로부터 입력할 것
slideSpeed = 10; // 슬라이드 속도, 숫자가 작아질수록 빨라짐
btnMargin = 20; // 하단과의 간격, 0을 주면 무슨 옵션인지 알 것임
autoSec = 4; // 자동넘기기 시간, 0을 주면 자동옵션 무력화
slideRadius = "40px"; // 갤러리 라운드 테두리 픽셀이나 퍼센트값
btnBasic = "#ffffff"; // 개별버튼 색상
btnTarget = "#000000"; // 현재버튼 색상
nextImage = "https://blog.kakaocdn.net/dn/bniCh0/btq8bsg19MB/PJUsaJdJkpJdbkHcWUC9wk/img.png"; // 전진버튼 주소
prevImage = "https://blog.kakaocdn.net/dn/I1GYB/btq8bL8uxVv/guiZYpTMedre9zj97Y1jk0/img.png"; // 후진버튼 주소
image_1 = "https://blog.kakaocdn.net/dn/csRR08/btq799CI5aa/PtkHLaFABEh5GUk7Zdp8OK/img.jpg";
image_2 = "https://blog.kakaocdn.net/dn/1i2I1/btq8bsVCBHv/WccnmtYuL4C4KjEdqSCenK/img.jpg";
image_3 = "https://blog.kakaocdn.net/dn/xBQjY/btq8aOLB6zE/kvl0wXU5HGOa5wRj943fck/img.jpg";
image_4 = "https://blog.kakaocdn.net/dn/qyzaz/btq8bMl03Lh/zqchlJvs17HYcflcKJsJF1/img.jpg";
image_5 = "https://blog.kakaocdn.net/dn/qTFDC/btq8at8K8pH/yxX7giOadkys9yhlH3ssKk/img.jpg";
image_6 = "https://blog.kakaocdn.net/dn/ba1PN1/btq79NzZi9L/xRllNJgag5mwfeKrhdw2AK/img.jpg";
image_7 = "https://blog.kakaocdn.net/dn/3J3Ch/btq79MntdX8/mg1zUkOWgplDDKIg5KXUUk/img.jpg";
image_8 = "https://blog.kakaocdn.net/dn/bnCInn/btq799JxU9n/0IdjW0Y9gG78W577ey0eBK/img.jpg";
image_9 = "https://blog.kakaocdn.net/dn/KRlrB/btq8aNzdErU/CB8kbDIfKmehHHAKEc59J0/img.jpg";
for (imageTotal = 0; this["image_" + (imageTotal + 1)]; imageTotal++);
imgNumber = autoCount = npMode = 1;
slidePosition = 0;
function slideMode(slide) {
    slidePosition = Number(galleryTable.style.marginLeft.slice(0, -1));
    slideGallery = function() {
        if (slidePosition == slide) clearInterval(slideInterval);
        else {
if (Math.abs(slidePosition - slide) <= 0.5) slidePosition = slide;
            else slidePosition += (slide - slidePosition) / slideSpeed;
            galleryTable.style.marginLeft = slidePosition + "%";
        }
    }
    slideInterval = setInterval(slideGallery, 10);
}
function autoMode() {
autoCount += 1;
if (autoCount == autoSec + 1) galleryGo(npMode ? "next" : "prev"), autoCount = 1;
}
if (autoSec > 0) setInterval(autoMode, 1000);
function slideClick() {
    if (slidePosition % 100 == 0) {
        for (img = 1; img <= imageTotal; img++) {
this["btn_" + img].style.width = this["btn_" + img].style.height = img == arguments[0] ? "20px": "15px";
            this["btn_" + img].style.backgroundColor = img == arguments[0] ? btnTarget: btnBasic;
        }
        slideMode(-100 * ((imgNumber = arguments[0]) - 1));
        autoCount = 1;
        currentNum.innerText = ("0" + imgNumber).slice(-2);
    }
}
function galleryGo() {
    if (arguments[0] == "next") slideClick(imgNumber == imageTotal ? 1 : imgNumber + 1), npMode = 1;
    else if (arguments[0] == "prev") slideClick(imgNumber == 1 ? imageTotal : imgNumber - 1), npMode = 0;
    else slideClick(arguments[0]);
}
onresize = function() {
slideHeight = galleryDiv.offsetWidth * hwRatio;
    galleryDiv.style.height = buttonTable.style.height = slideHeight + "px";
buttonTable.style.marginTop = -slideHeight + "px";
buttonDiv.style.marginTop = -(btnMargin + 40 * hwRatio) + "px";
}
function slideHtml() {
    document.write("<div id=galleryDiv style=overflow:hidden;border-radius:" + slideRadius + ">");
document.write("<table id=galleryTable cellpadding=0 cellspacing=0 style=width:" + imageTotal * 100 + "%;height:100%;table-layout:fixed;margin-left:0%>");
    for (img = 1; img <= imageTotal; img++) document.write("<td style=background-image:url(" + this['image_' + img] + ");background-size:contain></td>");
    document.write("</table><table id=buttonTable style=width:100% cellpadding=20 cellspacing=0>");
    document.write("<td align=left><img style=cursor:pointer src=" + prevImage + " onclick=galleryGo('prev')></td><td align=right><img style=cursor:pointer src=" + nextImage + " onclick=galleryGo('next')></td></table>");
    document.write("<div id=buttonDiv><span id=currentNum class=slideNum style=margin-right:10px></span>");
    for (img = 1; img <= imageTotal; img++) document.write("<span id=btn_" + img + " class=spanButton style=background-color:" + btnBasic + " onclick=galleryGo(" + img + ")></span>");
    document.write("<span id=totalNum class=slideNum style=margin-left:10px></span></div></div>");
totalNum.innerText = ("0" + imageTotal).slice(-2);
    btn_1.style.marginLeft = "0px";
galleryGo(1);
onresize();
}
</script>
<div><script>slideHtml()</script></div>