순차적 이미지 불러오기 질문 있습니다

<center>

<div style="display:block; width:620px; height:400px; overflow:hidden; border:1px solid red;"

data-inven-over-css="{

'img_1':{'visibility':'hidden'},

'img_2':{'visibility':'hidden'},

'img_3':{'visibility':'hidden'},

'img_4':{'visibility':'hidden'}

}">

<div style="display:block; width:3000px; height:300px;">

<div style="display:inline-block; width:620px; height:400px; float:left; z-index:5; transition:2s; position:relative; left:0px; 

background:url('https://upload3.inven.co.kr/upload/2023/05/26/bbs/i015276567187.gif') center / 100% 100% no-repeat;" data-inven-id="img_1"></div>

<div style="display:inline-block; width:700px; height:400px; float:left; z-index:4; transition:6s; position:relative; left:-620px;

background:url('https://upload3.inven.co.kr/upload/2023/05/26/bbs/i016724670141.gif') center / 100% 100% no-repeat;" data-inven-id="img_2"></div>

<div style="display:inline-block; width:620px; height:400px; float:left; z-index:3; transition:11s; position:relative; left:-1320px;

background:url('https://upload3.inven.co.kr/upload/2023/05/26/bbs/i016736304506.gif') center / 100% 100% no-repeat;" data-inven-id="img_3"></div>

<div style="display:inline-block; width:620px; height:400px; float:left; z-index:2; transition:15s; position:relative; left:-1940px;

background:url('https://upload3.inven.co.kr/upload/2023/05/26/bbs/i017020570978.gif') center / 100% 100% no-repeat;" data-inven-id="img_4"></div>

<div style="display:inline-block; width:620px; height:400px; float:left; z-index:1; transition:18s; position:relative; left:-2560px;

background:url('https://upload3.inven.co.kr/upload/2023/05/26/bbs/i013452582303.gif') center / 100% 100% no-repeat;" data-inven-id="img_5"></div>

</div>

</div>

</center>





참조하여 제가 수정한  스크립트 내용입니다 


제가 추가 하고싶은건 마지막 이미지까지 출력이 끝났을때 다시 1번 이미지부터 돌아가서 재 실행 된는 스크립트를 알고싶은데요 혹시 아시는분 계실가요 

그리고 스크립트 적용하니 
[invenCustomAction-error] :: Expected property name or '}' in JSON at position 1
라는 내용이 뜨는데 어떻게 조치를 취해야할가요