포트폴리오를 만들던 중에 난관에 봉착한 적이 있다.
팝업창에 이미지 슬라이더를 넣으려 했는데,
넣어지긴 하나, 슬라이더가 정상적으로 작동하지 않는 것이었다.
그것도 아예 작동하지 않는것도 아니고 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 안에 슬라이드쇼를 집어넣었고,
결과는 매우 정상적으로 잘 작동하게 되었다.
말도 안되는 실수로 일주일을 헤맸다니.........
문제를 해결해서 행복하긴 하지만 어이가 없다
'web' 카테고리의 다른 글
웹디자인 참고할때 좋은 사이트 (0) | 2020.03.19 |
---|---|
마크다운 쉽게 쓰기 - 마크다운 에디터 'StackEdit' (0) | 2020.02.26 |
Git - 자주쓰는 명령어 모음 (0) | 2020.01.28 |
CSS Diner - css 선택자 연습 (0) | 2020.01.08 |
반응형 웹 만들기 - 미디어쿼리 반응형 사이즈 (0) | 2020.01.04 |