인벤 스크립트에 관심을 가져주셔서 감사합니다.

문의 주셨던 4-1, 4-2번 내용에 대한 샘플 소스를 전달 드립니다.
리스트 / 페이지 번호, 그리고 이미지 중앙 정렬 관련 처리를 한 소스 입니다.

이미지 중앙 정렬(background-position)과 반복 안함(background-repeat), 그리고 사이즈(background-size)는 5번, 6번 이미지를 참고해 주세요. 규격 참고를 위해 외곽선(border:2px)을 넣어 놨습니다.

■ 샘플 소스 - HTML을 누른 상태에서 붙여넣어 주세요.

<div data-inven-list="list-item-1,list-item-2,list-item-3,list-item-4,list-item-5,list-item-6" data-list-id="list-item-1" style="width:404px;border:2px solid gray;">

<div data-inven-id="list-item-1" style="text-align:center;">
<img src="http://upload2.inven.co.kr/upload/2017/09/21/bbs/i14698514060.jpg"><br>
(1/6)
</div>

<div data-inven-id="list-item-2" style="text-align:center;display:none;">
<img src="http://upload2.inven.co.kr/upload/2017/09/21/bbs/i16069549831.jpg"><br>
(2/6)
</div>

<div data-inven-id="list-item-3" style="text-align:center;display:none;">
<img src="http://upload2.inven.co.kr/upload/2017/09/21/bbs/i16001189225.jpg"><br>
(3/6)
</div>

<div data-inven-id="list-item-4" style="text-align:center;display:none;">
<img src="http://upload2.inven.co.kr/upload/2017/09/21/bbs/i16035166207.jpg"><br>
(4/6)
</div>

<!-- 5번 이미지-->
<div data-inven-id="list-item-5" style="text-align:center;display:none;">
<div style="display:inline-block;width:400;height:400;background:url(http://upload2.inven.co.kr/upload/2017/09/21/bbs/i16066398259.jpg)no-repeat center center/ 80%;"></div><br>
(5/6)
</div>

<!-- 6번 이미지-->
<div data-inven-id="list-item-6" style="text-align:center;display:none;">
<div style="display:inline-block;width:400;height:400;background:url(http://upload2.inven.co.kr/upload/2017/09/21/bbs/i16094400043.jpg)no-repeat 50% 50%/ 60%;"></div><br>
(6/6)
</div>



■ 결과물 샘플


(1/6)

(2/6)

(3/6)

(4/6)

(5/6)

(6/6)