Slideshow Gallery 1

기본 소스: https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp

w3schools에서 지원해주는 Slideshow Gallery를 사용하려고 했지만 코드가 뭔가 맘에 안들기도 하고, 기능적인 부분에서 추가할 사항이 있어서 코드 분석을 시작했다.

예제는 mySlides, column에 각각 이미지를 넣어주고 JS로 순서를 맞춰 띄워주는 방식이었지만 나는 조금 더 효율적인 방법으로 코드를 개선하고 싶었다.

HTML

JS로 처리하면 이미지 경로는 한번만 지정해주고 column에서 결정된 src 주소만 mySlides로 보내주면 끝 아닌감..?

JAVASCRIPT

plusSlides()

var slideIndex = 1;                                                    
showSlides(slideIndex);

function plusSlides(n) {                                   
    showSlides(slideIndex += n); 
    if(n>0){
        var _scrollX = $('.row').scrollLeft();
        $('.row').scrollLeft(_scrollX + 80);  
    }else{
        var _scrollX = $('.row').scrollLeft();
        $('.row').scrollLeft(_scrollX - 80);   
    }
}

prev, next 버튼을 누르면 plusSlides 함수가 onclick으로 호출된다.
plusSlides()는 버튼을 눌렀을 때 slideIndex에 (+1), (-1) 계산해 주는 함수이다.
나는 여기에 버튼을 누를 때마다 스크롤을 움직일 수 있게 scrollLeft를 사용하여 코드를 추가해 주었다.

currentSlide()

function currentSlide(n) {
    showSlides(slideIndex = n);
}

만약 사용자가 버튼이 아닌 하단에 있는 썸네일 이미지를 누른다면 currentSlide 함수가 onclick으로 인하여 호출되고, 그 안에는 이미지 번호가 들어있다. 이미지 번호를 바로 slideIndex로 넣어주어 계산한다.

showSlides()

function showSlides(n) {
    var i;
    var x;
    var slides = document.getElementsByClassName("mySlides"); 
    var dots = document.getElementsByClassName("demo");

    if(n > dots.length){
        slideIndex = 1;
    }else if(n < 1){
        slideIndex = dots.length;
    } 

    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", ""); 
    }  
  
    dots[slideIndex - 1].className += " active";                     
    x = dots[slideIndex - 1].src    
    document.getElementById("myimg").src = x;                                           
} 

slides는 mySlides(메인 이미지), dots는 demo(섬네일 이미지), x는 src(mainimg로 보내줄 주소)로 정의를 해준 뒤 만약 slideIndex가 슬라이더 길이보다 길면 처음으로 돌아가고, 슬라이더 길이보다 짧으면 끝으로 돌아갈 수 있게 처리해 주고, for 문을 통해 이전 썸네일 이미지에 있는 active 클래스를 지워준다.

또한 선택된 이미지 경로를 가지고 와서 x에 담아 둔 뒤, 그 경로를 메인 이미지로 전송해 준다.

그럼 HTML로 돌아와서 mySlides src 안에는 x가 들어있고, 만약 경로를 받지 못했을 때 onError를 사용해 임시 이미지를 생성해 준다.

CSS

.container_img {
        position: relative;
        padding:  20px;
        border: 1px solid #000;
        background-color: #f0f0f0;
        width: 488px;
        height: 422px; 
}
 
.mySlides {
        display: none;
        background-color: rgb(255, 255, 255);
        text-align : center;
        overflow: hidden;
        height: 293px;
        width: 486px;
        margin-bottom: 20px;
}

  .mainimg{
        width: 100%;
        height: 100%;
        object-fit: contain;
  }

 
.prev,
.next {
        cursor: pointer;
        position: absolute;
        top: 29%;
        width: 48px; 
        font-weight: bold; 
        font-size: 50px; 
}
 
.next {
        right: 0;
        border-radius: 3px 0 0 3px;
}
 
.prev:hover,
.next:hover {
        color: rgba(0, 0, 0, 0.8);
}

.row{
        display: flex;
        flex-wrap: wrap;
        height: 109px;
        overflow-y: hidden;
        flex-direction: column;
}

.row:after {
        content: "";
        display: table;
        clear: both;
}

.column {
        float: left;
        width: 25%; 
}

.column img{
        width: 100%;
}
  
.demo {
        opacity: 0.5;
        cursor: pointer;
}

.active,
.demo:hover {
        opacity: 1;
        background-color: black;
}

- 끝 -