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

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

요청하신 내용 이외에,
- 최초 선언 가로 폭을 제외한 나머지는 상대 가로 폭으로 변경하였으니, 가장 앞에 있는 width:400px; 원하시는 가로 폭을 넣으면 그에 맞춰 모든 규격이 맞춰질 것입니다.
- 세로폭의 경우는 마진을 이용한 애니메이션이 들어가 있어서, 원본의 300px을 수정하지 않았으니, 이 부분을 수정하길 원하시는 경우는 원하는 px 단위를 말씀해 주세요.
- 가로로 이미지가 늘어지는 것이 거슬리는 경우는 본문 부분의 width:100%;를 max-width:100%;로 수정해 주시면 좋습니다.

섬네일의 좌우 배치의 경우는 이라는 주석 바로 뒤에 붙어 있는 float의 값을 left(왼쪽), right(오른쪽)으로 변경만 해 주시면, 좌우 어디든 위치시킬 수 있습니다.

수정에 어려움이 있으시거나 이외에도 궁금하신 내용은 언제든지 글 남겨주세요.
감사합니다.



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

<center>
<div style="display:block; width:400px; height: 302px; padding:2px 1px 1px 2px; background:none; overflow:hidden;" align="center">
<!-- 가로 폭은 바로 위의 width 값을 조정하면 모든 가로 폭이 맞춰집니다.-->

<!-- 전체 프레임 -->
<div style="display: inline-block; width:100%; height:100%; margin: 0px; overflow:hidden;" align="left">


<!-- 오른쪽 프레임 -->
<div style="display:inline-block; width:15%; height:100%; margin:0px -1px; float:right; overflow: hidden;">
<!-- 섬네일의 위치는 위의 float 값을 left(왼쪽), right(오른쪽)로 수정해서 조정할 수 있습니다.-->

<img src="●●●이미지1●●●"
style="display:block; background:white; margin: 0px -4px 1px 0px; width: 100%; height:50px; opacity:0.8;"
data-inven-over-css="{'frame':{'margin-top':'0', 'margin-left':'0'}, '_SELF_':{'opacity':'1'}}"
data-inven-out-css="{'_SELF_':{'opacity':'0.8'}}">

<img src="●●●이미지2●●●"
style="display:block; background:white; margin: 1px -4px 1px 0px; width: 100%; height:50px; opacity:0.8;"
data-inven-over-css="{'frame':{'margin-top':'-300', 'margin-left':'0'}, '_SELF_':{'opacity':'1'}}"
data-inven-out-css="{'_SELF_':{'opacity':'0.8'}}">

<img src="●●●이미지3●●●"
style="display:block; background:white; margin: 1px -4px 1px 0px; width: 100%; height:50px; opacity:0.8;"
data-inven-over-css="{'frame':{'margin-top':'-600', 'margin-left':'0'}, '_SELF_':{'opacity':'1'}}"
data-inven-out-css="{'_SELF_':{'opacity':'0.8'}}">

<img src="●●●이미지4●●●"
style="display:block; background:white; margin: 1px -4px 1px 0px; width: 100%; height:50px; opacity:0.8;"
data-inven-over-css="{'frame':{'margin-top':'-900', 'margin-left':'0'}, '_SELF_':{'opacity':'1'}}"
data-inven-out-css="{'_SELF_':{'opacity':'0.8'}}">

<img src="●●●이미지5●●●"
style="display:block; background:white; margin: 1px -4px 1px 0px; width: 100%; height:50px; opacity:0.8;"
data-inven-over-css="{'frame':{'margin-top':'-1200', 'margin-left':'0'}, '_SELF_':{'opacity':'1'}}"
data-inven-out-css="{'_SELF_':{'opacity':'0.8'}}">

<img src="●●●이미지6●●●"
style="display:block; background:white; margin: 1px -4px 1px 0px; width: 100%; height:50px; opacity:0.8;"
data-inven-over-css="{'frame':{'margin-top':'-1500', 'margin-left':'0'}, '_SELF_':{'opacity':'1'}}"
data-inven-out-css="{'_SELF_':{'opacity':'0.8'}}">


</div>
<!-- 왼쪽 프레임 끝 -->


<!-- 중앙 프레임 -->
<div style="display:inline-block; width: 85%; height: 100%; margin-right:1px; float:left; overflow: hidden;">
<div style="width: 100%; height:1800px; transition:0.3s ease-in-out;" data-inven-id="frame">

<div style="display:inline-block; width:100%; height: 1800px; margin-right:-4px;">

<img src="●●●이미지1●●●" style="display:block; margin-right:-4px; width: 100%; height:300px;">
<img src="●●●이미지2●●●" style="display:block; margin-right:-4px; width: 100%; height:300px;">
<img src="●●●이미지3●●●" style="display:block; margin-right:-4px; width: 100%; height:300px;">
<img src="●●●이미지4●●●" style="display:block; margin-right:-4px; width: 100%; height:300px;">
<img src="●●●이미지5●●●" style="display:block; margin-right:-4px; width: 100%; height:300px;">
<img src="●●●이미지6●●●" style="display:block; margin-right:-4px; width: 100%; height:300px;">

</div>

</div>
</div>
<!-- 중앙 프레임 끝 -->


</div>
<!-- 전체 프레임 끝 -->

</div>
</center>