어이없는 실수 - 팝업창에 이미지 슬라이드 넣기

 

포트폴리오를 만들던 중에 난관에 봉착한 적이 있다.

팝업창에 이미지 슬라이더를 넣으려 했는데,

넣어지긴 하나, 슬라이더가 정상적으로 작동하지 않는 것이었다.

그것도 아예 작동하지 않는것도 아니고 F12를 눌러 개발도구를 켜면

정상적으로 작동되었다.

 

이 때문에 거의 일주일은 넘게 해결책을 찾아보았으나,

무슨 함수 값을 지정해주어야 한다느니 하는 머리아파 보이는 해결책들로 씨름을 하다가

결국 내가 짠 제이쿼리 코드를 다시 찬찬히 보기로 하였다.

 

 

    $('#box5>span').click(function () {
    $('#box5>.box5_popup').css('display', 'block');
    })
    
    /*팝업*/
    var swiper = new Swiper('.third', {
    slidesPerView: 1,
    spaceBetween: 30,
    loop: true,
    pagination: {
    el: '.swiper-pagination',
    clickable: true,
    },
    navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
    },
    })

 

이것이 처음에 내가 짠 코드인데,

보다시피 팝업창과 슬라이드쇼를 따로 분리를 해놓았었다.

이러니.. 팝업창을 열면 슬라이드쇼가 작동을 하지 못했던 것.

 

	$('#box5>span').click(function () {
		$('#box5>.box5_popup').css('display', 'block');
		    	/*팝업*/
		var swiper = new Swiper('.third', {
			slidesPerView: 1,
			spaceBetween: 30,
			loop: true,
			pagination: {
				el: '.swiper-pagination',
				clickable: true,
			},
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
		})
	})

 

혹시나 하는 마음에 위와 같이 팝업창 function 안에 슬라이드쇼를 집어넣었고,

결과는 매우 정상적으로 잘 작동하게 되었다.

말도 안되는 실수로 일주일을 헤맸다니.........

문제를 해결해서 행복하긴 하지만 어이가 없다