[기타] '리리리'님이 문의하신 스크립트 입니다.

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

문의하신 내용을 바탕으로 작성된 소스를 전달해 드립니다.

다만 이미지가 인장보다 큰 관계로, 편집기 이용 시 이미지가 리사이징 되는 현상을 겪으실 수 있으니,
편집 / 수정 시 마다 원본 소스를 보존해 주시고, HTML 모드에서만 편집과 저장을 진행해 주세요.

혹시 원하시던 형태와 다르거나, 이외에도 궁금하신 점은 언제든지 글 남겨주세요.

감사합니다.


■ HTML을 누른 상태에서 붙여넣어 주세요.

---

<div style="position:relative;top:50px;padding:0 20 0 20px;cursor:default;">
<div style="display:inline-block;color:black;float:left;" data-inven-over-css="{'top_b':{'margin-left':'0'},'_SELF_':{'color':'blue'}}" data-inven-out-css="{'_SELF_':{'color':'black'}}">◀</div>

<div style="display:inline-block;color:black;float:right;" data-inven-over-css="{'top_b':{'margin-left':'-400'},'_SELF_':{'color':'blue'}}" data-inven-out-css="{'_SELF_':{'color':'black'}}">▶</div>
</div>

<div style="width:450px;height:1000px;overflow:hidden;display:block;">
<div style="width:1000px;transition:0.4s;text-align:left;margin-left:-400" data-inven-id="top_b">
<img src="https://upload2.inven.co.kr/upload/2017/02/20/bbs/i13498732685.png" width="900px">
</div>
</div>



■ 소스 수정 설명

---

<div style="position:relative;top:50px;padding:0 20 0 20px;cursor:default;">
- 화살표 상자의 조절. top 뒤의 값을 조절 해서 화살표가 위치한 높이를 바꿀 수 있습니다. padding 값을 통해 화살표 상우하좌(순서)에 여백을 넣을 수 있습니다.

<div style="display:inline-block;color:black;float:left;" data-inven-over-css="{'top_b':{'margin-left':'0'},'_SELF_':{'color':'blue'}}" data-inven-out-css="{'_SELF_':{'color':'black'}}">◀</div>
- margin-left 값을 조절하여, ◀ 버튼 위에 마우스를 올렸을 때 이미지가 이동하는 정도를 조절할 수 있습니다.
◀ 대신 이미지/ 다른 문자열을 넣을 수도 있습니다.


<div style="display:inline-block;color:black;float:right;" data-inven-over-css="{'top_b':{'margin-left':'-400'},'_SELF_':{'color':'blue'}}" data-inven-out-css="{'_SELF_':{'color':'black'}}">▶</div>
- margin-left 값을 조절하여, ▶ 버튼 위에 마우스를 올렸을 때 이미지가 이동하는 정도를 조절할 수 있습니다.
▶ 대신 이미지/ 다른 문자열을 넣을 수도 있습니다.

</div>


<div style="width:450px;height:1000px;overflow:hidden;display:block;">
- 이미지 상자. width(가로폭)와 height(높이)를 설정할 수 있습니다.

<div style="width:1000px;transition:0.4s;text-align:left;margin-left:-400;" data-inven-id="top_b">
- transition 값을 조절하여 애니메이션 속도를 조절할 수 있습니다. margin-left 값을 조절하여 이미지 초기 위치를 조절할 수 있습니다.

<img src="https://upload2.inven.co.kr/upload/2017/02/20/bbs/i13498732685.png" width="900px">
- 이미지. width 값을 변경하여 이미지 크기를 조절할 수 있습니다.

</div>
</div>