회사 홈페이지에서 롤링배너 들어가는 페이지가 있어서 작업을 하였다.
사실... 내가 작업한 건 아니구...^^;;; 다른 사람이 작업한 부분 복.붙. 했지만...^^
어쨌든 복붙해왔는데 내가 만든 페이지에서만 이미지가 끊겨서 노출이 되고 있는 것이었다!
어째서!
다시 코드를 비교해보았다.
사실 이 프로젝트를 만든 사람이 한 땀 한 땀 만들었을 줄 알았는데 오늘에서야 찾아보니 simplyScroll 이라는 레포를 가져와서 사용하고 있는 것을 알게되었다.
jquery-simplyscroll GitHub Page
잘 돌아가는 부분과 안 돌아가는 부분의 코드를 확인해 본 결과 안에 들어가 있는 li 태그의 이미지 갯수에 차이가 있었다.
잘 돌아가는 부분은 6개 정도 있었는데 안 되는 부분은 이미지가 1개 뿐이었기 때문에.
무엇보다 모바일이나 약간 작은 모니터 환경(내꺼)에서는 잘 돌아가는 걸 보니 무언가 width 때문에 일어나는 문제같다는 것을 예감했다.
콘솔창으로 element 탭 보면서 확인해 본 결과,
simplyScroll은 한 이미지가 돌아가면서 걔가 어느 시점에 기준 위치를 넘으면 그 다음 이미지를 붙여주는 형식이었다.
지금 우리 프로젝트는 width가 3400px 정도로 잡혀있는 상태.
롤링이미지 하나의 width는 1100px 이었다.
즉, 총 width가 3400px로 있는 상태에서 2개의 이미지만 노출되는 형식이다 보니 2200px만 나타나고 있는 중이고 나머지 1300px은 어느정도 화면에 나타날 때까지 빈 이미지로 보이는 상황이었다.
일정 시점을 넘어야 그 다음 이미지를 붙여주는데 일정 시점이 지나기 전에도 이미 화면에 보이고는 있으니까.
그래서 똑같은 이미지를 3400px 보다 더 넘어갈 수 있도록 아래와 같이 복사를 더 했다.
그리고 잘 되는 것을 확인!
<ul class="pt_brand_in">
<li class="pt_brand_item"><img src="/res/img/rolling.png" /></li>
<li class="pt_brand_item"><img src="/res/img/rolling.png" /></li>
<li class="pt_brand_item"><img src="/res/img/rolling.png" /></li>
<li class="pt_brand_item"><img src="/res/img/rolling.png" /></li>
</ul>
<script> $(".pt_brand_in").simplyScroll({
speed: 1,
direction: 'forwards',
pauseOnHover: false,
autoMode: 'loop'
});
</script>