[JavaScript] 슬라이더 안에 슬라이더

파이널 프로젝트 중 슬라이더 안에 슬라이더를 써야하는 일이 생겼다.

슬라이더 하나 단독으로는 사용을 해봤는데 그 속에 슬라이더를 또 쓰려고 하니 잘 적용이 안됐다.

그래서 구글링을 열심히 해봤는데 정보가 많지 않았고 하루동안 고생했는데 해결해보니 정보가 없는 이유는 알려줄 필요가 없어서였다는 것을.. 알아버렸다.

슬라이더 안에 슬라이더 안에 슬라이더 안에 슬라이더 안에 슬라이더 안에.... 는 별 거 아니었다.

하지만 나는 고생했기에!! 정리한다!!

 

바깥 슬라이더

첫번째 슬라이더는 간단했다.
구글링을 통해 찾은 슬라이더 코드는 ul과 li를 이용해서 구성을 했고, 나도 script에서 append를 사용 했을 때 <div>안에는 append가 적용되지 않았던 잘못된 기억이 있어서 ul을 사용했었다.
하지만 div도 적용 잘 되더라! 오히려 appendTo가 잘 적용이 안되는.. 그건 또 곧 풀어야 할 숙제다... 흑

<div id="show_story">
    <input type="hidden" id="showst" value="${showAllStory.m_id}" onclick="split('${showAllStory.m_id}','${showAllStory.s_type}','${showAllAStory.m_id}','${showAllAStory.s_type}');">
	<div id="story"></div>
</div>

나는 받아온 값을 split해서 다시 배열로 만들어줘야 했으므로 #showst를 trigger로 지정해 실행되게 해주었다.

function split(a, a_t, b, b_t) {
	var arr = a.split("|");
	var arrb = b.split("|");
	for (i = 0; i < arr.length; i += 3) {
		for (j = i; j < i + 3; j++) {
        	if (arr[j] != undefined) {
				$("#story").append('<div class="story_photo_con" onclick="showeach(\'' + arr[j] + '\',\'' + a_t + '\');">' + '<div class="scon_con scon_con' + arr[j] + '"><div class="scon scon' + arr[j] + a_t + '"></div></div></div>')
            }
        }
        $("#story").append('<div class="story_photo_con" onclick="showeach(\'' + arrb[i] + '\',\'' + b_t + '\');">' + '<div class="scon_con scon_con' + arrb[i] + '"><div class="scon scon' + arrb[i] + b_t + '"></div></div></div>')
    }
    
    // 게시물 슬라이드
    var slideWrapper = document.querySelector('#show_story');
    var slides = document.querySelectorAll('.story_photo_con');
    var totalSlides = slides.length;
    var sliderWidth = slideWrapper.clientWidth;
    var slideIndex = 0;
    var slider = document.querySelector('#story');
    slider.style.width = sliderWidth * totalSlides + 'px';

    function showSlides(n) {
    	slideIndex = n;
        if (slideIndex == -1) {
        	slideIndex = totalSlides - 1;
        } else if (slideIndex === totalSlides) {
            slideIndex = 0;
        }
        slider.style.left = -(sliderWidth * slideIndex) + 'px';
    }

    function plusSlides(n) {
    	showSlides(slideIndex += n);
    }

    function currentSlide(n) {
        showSlides(slideIndex = n);
    }
    var nextBtn = document.querySelector('.slide_btn_next');
    var prevBtn = document.querySelector('.slide_btn_prev');
    nextBtn.addEventListener('click', function() {
        plusSlides(1);
    });
    prevBtn.addEventListener('click', function() {
        plusSlides(-1);
    });
}

#show_story {
	max-width: 1000px;
    height: 100%;
    position: relative;
    overflow: hidden;
}
                
#story {
	display: flex;
    position: absolute;
    top: 0px;
    left: 0px;
}
                
.story_photo_con {
	width: 1000px;
    height: 800px;
    background-color: beige;
}

바깥 슬라이더는 아무 문제 없이 잘 실행 되었다.
(구글링에서 이 슬라이더 코드를 만났을 때 어찌나 감사하던지..! 감사함다!!)

 

안쪽 슬라이더

여기가 문제의 발생지이다.
append로 나타냈던 태그에 onclick 이벤트를 또 주는 것이다.

function showeach(id, s_type) {
	$.ajax({
    	url: "${pageContext.request.contextPath}/storyResult.do",
        method: "POST",
        data: {
        	id: id,
            s_type: s_type
        },
        dataType: "json",
        success: function (story) {
            var count = story;
            for (var i = 0; i < count.story.length; i++) {
            	var s_img = count.story[i].s_img;
                $(".scon" + id + s_type).append('<div class="story_each_con story_each_con' + id + '"><img src="${pageContext.request.contextPath}/resources/uploadFiles/' + s_img + '"></div>');
            }
            // 게시물 슬라이드
            var slideWrapper = document.querySelector('.scon_con' + id);
            var slides = document.querySelectorAll('.story_each_con' + id);
            var totalSlides = slides.length;
            var sliderWidth = slideWrapper.clientWidth;
            var slideIndex = 0;
            var slider = document.querySelector('.scon' + id + s_type);
            slider.style.width = sliderWidth * totalSlides + 'px';

            function showSlides(n) {
                slideIndex = n;
                if (slideIndex == -1) {
                    slideIndex = totalSlides - 1;
                } else if (slideIndex === totalSlides) {
                    slideIndex = 0;
                }
                slider.style.left = -(sliderWidth * slideIndex) + 'px';
            }

            function plusSlides(n) {
                showSlides(slideIndex += n);
            }

            function currentSlide(n) {
                showSlides(slideIndex = n);
            }
            var nextBtn = document.querySelector('.slide_btn_next_s');
            var prevBtn = document.querySelector('.slide_btn_prev_s');
            nextBtn.addEventListener('click', function () {
                plusSlides(1);
            });
            prevBtn.addEventListener('click', function () {
                plusSlides(-1);
            });
        },
        error: function (request, status, error) {
            alert("code:" +
                request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
        }
	});
}

.scon_con {
  max-width: 1000px;
  height: 800px;
  position: relative;
  overflow: hidden;
  background-color: gray;
}

.scon {
  display: flex;
  position: absolute;
  top: 0px;
  left: 0px;
}

.story_each_con {
  width: 1000px;
  height: 800px;
  background-color: crimson;
}

앞에서 알려줄 필요가 없어서 정보가 없다는 것이 여기 있다. 그냥 똑같이 쓰기만 하면 되기 때문이다.

그런데도 내가 에러가 생겼던 이유는

첫째, 데이터는 여러개인데 실행할 부분을 특정하지 못했다.
바깥의 슬라이더는 특정할 필요가 없었다. 어짜피 하나니까!
그러나 안쪽 슬라이더는 여러개이다. 꼭 특정 해줄 것.
버튼 부분이 append로 함께 계속 나오는 것이 아니라 바깥쪽에 만들어줬다면 버튼은 특정해 줄 필요 없다.

둘째, ajax를 사용해서 success로 append를 걸어준 부분의 onclick 함수는 success 함수 안에 함께 있어야 했다.
이 부분은 왜 이렇게 되는지 잘 모르겠지만.. 슬라이더 뿐만 아니라 다른 ajax 부분에서도 적용이 안되더라ㅠㅠ
그래서 success가 엄청나게 길어지는 결과 + 코드 보기가 복잡해보인다는 문제점이 있지만 적용 되게 만드는 방법을 아직 못찾았다!

append와 function과 ajax의 콜라보.. 너무 어렵다..

그래도 일단 큰불은 껐다!